Wookmark基于jQuery瀑布流JS插件

Question

瀑布流现在被很多网站所使用，足见其有优越的浏览体验，创建瀑布流的效果并不难，我们可以使用很多方法去实现，JS插件是其常见的效果之一，Wookmark是一个基于jQuery的瀑布流插件。

现在很流行的一种网页布局效果，瀑布流，随意、洒脱，个性十足，一种代表时尚潮流的网页设计风格，如果你想在网页上使用瀑布流，Wookmark可以让你开拓思路，让你快速开发出瀑布流布局，jQuery瀑布流代码实例下载。

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

使用方法

1、下载Wookmark

你可以访问Wookmark的Github地址，或者访问Wookmark的官网下载得到源文件，然后将文件解压到你的本地项目中，建议将JS和CSS文件分开放置。

2、引入插件文件

<script type="text/javascript" src="jquery.wookmark.js"></script>

3、调用插件

$('#tiles li').wookmark();

手动触发布局事件

// 根据需要，可以进行手动触发重新布局
$('#list').trigger('refreshWookmark');

带参数调用

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

该插件可以配合ajax来实现动态加载数据，不过新增之后需要重新执行一次。如果是采用

var handler = $('#tiles li');
handler.wookmark(options);

这种方式的在重新绑定前需要执行一下下面的代码，做点清理工作。

handler.wookmarkClear();

参数说明

名称	默认值	说明
container	$('body')	父容器。自定义时需要给父容器设置 CSS 属性 "position: relative"。
align	'center'	对齐方向，可设置为："left", "right", "center"。
direction	undefined	排序方向。可设置为："left"（从左至右）, "right"（从右至左）若不设置，则判断 align 为 "right" 时，direction 为 "right"，否则默认为 "left"。
autoResize	false	是否在浏览器窗口大小变化时进行重新布局。
resizeDelay	50	检测自动重新布局的间隔时间 (ms)。
itemWidth	0	列表项目的宽度 (px 或 %)。
flexibleWidth	0	列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。
offset	2	列表项目的间距 (px)，横向纵向相同。
verticalOffset	undefined	列表项目纵向的间距 (px)，与 offset 配合即可分别设置横向与纵向的间距。
outerOffset	0	外部间距，与父容器顶部的间距。
ignoreInactiveItems	true	是否隐藏被过滤的项目。
fillEmptySpace	false	是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。
comparator	null	自定义排序方法。
possibleFilters	[]
onLayoutChanged	undefined	布局变化时触发的函数。

相关连接

• 官方地址：http://www.wookmark.com/jquery-plugin
• 官方下载：https://github.com/GBKS/Wookmark-jQuery