jquery瀑布流插件(WookMark)

瀑布流布局效果目前来说还是挺流行的，从网页到手机应用，都能见到瀑布流的身影。网上也有很多关于这个的介绍，这里就稍微介绍下，留个备份存档
相比较手机应用来说，感觉网页上的瀑布流布局效果实现简单很多，因为我们有现成的jQuery插件可以用，只要稍微的引用一下，再写那么一两句调用代码，然后就没我们什么事了，瀑布流就这么呈现出来了。
效果图：

Wookmark这个插件的用法也是相当的简单。
引入jQuery和wookmark

1 2	<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > </script> <script type = "text/javascript" src = "http://www.wookmark.com/js/jquery.wookmark.min.js" > </script>

HTML代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<style> #tiles { position : relative } </style> < ul id = "tiles" >      < li > < img src = "images/image_1.jpg" width = "200" height = "283" > < p > 1 < / p > < / li >      < li > < img src = "images/image_2.jpg" width = "200" height = "300" > < p > 2 < / p > < / li >      < li > < img src = "images/image_3.jpg" width = "200" height = "252" > < p > 3 < / p > < / li >      < li > < img src = "images/image_4.jpg" width = "200" height = "158" > < p > 4 < / p > < / li >      < li > < img src = "images/image_5.jpg" width = "200" height = "300" > < p > 5 < / p > < / li >      < li > < img src = "images/image_6.jpg" width = "200" height = "297" > < p > 6 < / p > < / li >      < li > < img src = "images/image_7.jpg" width = "200" height = "200" > < p > 7 < / p > < / li >      < li > < img src = "images/image_8.jpg" width = "200" height = "200" > < p > 8 < / p > < / li >      < li > < img src = "images/image_9.jpg" width = "200" height = "398" > < p > 9 < / p > < / li >      < li > < img src = "images/image_10.jpg" width = "200" height = "267" > < p > 10 < / p > < / li >      < li > < img src = "images/image_1.jpg" width = "200" height = "283" > < p > 11 < / p > < / li >      < li > < img src = "images/image_2.jpg" width = "200" height = "300" > < p > 12 < / p > < / li >      < li > < img src = "images/image_3.jpg" width = "200" height = "252" > < p > 13 < / p > < / li > < / ul >

应用wookmark

1 2 3 4 5 6 7 8

$ ( document ) . ready ( new function ( ) {      $ ( '#tiles li' ) . wookmark ( {          autoResize : true , // 当浏览器大小改变时是否自动调整          container : $ ( '#tiles' ) , // 父容器，这个要注意的一点是该容器需要有 position: relative 属性。          offset : 2 , // 每个元素之间的距离            itemWidth : 210 // 每个元素的宽度，瀑布流高度是不限制的，所以只要宽度固定就可以了      } ) ; } ) ;

demo演示地址:http://www.zjgsq.com/example?pid=1127

转载请注明：Web前端开发-Web前端工程师 » jquery瀑布流插件(WookMark)