jQuery插件之-Wookmark瀑布流插件

jQuery插件之-Wookmark瀑布流插件

发表于15 天前  ? JavaScript, jQuery  ? 暂无评论 ? 被围观 166 views+

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

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
本地下载：Wookmark