瀑布流布局效果目前来说还是挺流行的,从网页到手机应用,都能见到瀑布流的身影。
相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的引用一下,再写那么一两句调用代码,然后就没我们什么事了,瀑布流就这么呈现出来了。
Wookmark这个插件的用法也是相当的简单。
先看下效果图
首先,引入JS。
1 | <script type= "text/javascript" src= "jquery.wookmark.js" ></script> |
HTML代码结构
01 | < div id = "main" role = "main" > |
02 | < ul id = "tiles" > |
03 | <!-- These are our grid blocks --> |
04 | < li >< img src = "http://www.xiaoningmeng.com/wp-content/themes/HotNewspro/images/load.gif" width = "200" height = "283" original = "images/image_1.jpg" > |
05 |
06 | 1 |
07 | </ li > |
08 |
09 | ...... |
10 | <!-- End of grid blocks --> |
11 | </ ul > |
12 | </ div > |
接下来调用
简单调用
1 | $( '#tiles li' ).wookmark(); |
带参数调用
1 | $( function () { |
2 | $( '#tiles li' ).wookmark({ |
3 | autoResize: true , // 当浏览器大小改变时是否自动调整 |
4 | container: $( '#main' ), // 父容器,这个要注意的一点是该容器需要有 position: relative 属性。 |
5 | offset: 2, // 每个元素之间的距离 |
6 | itemWidth: 210, // 每个元素的宽度,瀑布流高度是不限制的,所以只要宽度固定就可以了 |
7 | resizeDelay: 50 // 自动调整延迟时间,一般情况下不需要设置,默认的就好了。 |
8 | }); |
9 | }); |
该插件可以配合ajax来实现动态加载数据,不过新增之后需要重新执行一次。如果是采用
1 | var handler = $( '#tiles li' ); |
2 | handler.wookmark(options); |
这种方式的在重新绑定前需要执行一下下面的代码,做点清理工作。
1 | handler.wookmarkClear(); |
官方地址:http://www.wookmark.com/jquery-plugin
官方下载:https://github.com/GBKS/Wookmark-jQuery
http://www.360doc.com/content/12/0524/12/1542811_213342663.shtml