Wookmark是一款非常炫酷和实用的仿Pinterest网站jQuery瀑布流动态网格布局插件。使用该插件可以制作出瀑布流网格布局，并且可以对图片进行过滤、排序操作，可以动态加载图片，可以制作图片lightbox效果，还可以制作响应式的瀑布流网格布局界面。
插件中使用imagesloaded来动态加载图片。在制作图片的lightbox效果时使用的是jquery.magnific-popup.js插件。
最新2.0版本的Wookmark可以不依赖于jQuery而单独工作。jQuery是可选的，要使用jQuery，它的版本必须是1.5.3以上的版本。
安装
可以通过bower来安装该瀑布流插件。
bower install wookmark-jquery
使用方法
使用该瀑布流插件要引入wookmark.js文件，可以选择使用jQuery。demo中的容器样式都放置在main.css中，你也可以使用它。
<link rel=”stylesheet” href=”css/main.css”>
<script src=”js/jquery.js”></script>
<script src=”js/wookmark.js”></script>
调用插件
不使用jQuery来调用插件：
var wookmark = new Wookmark(‘#myElementContainer'[, options ]);
使用jQuery来调用插件：
$(‘#myElementContainer’).wookmark(options);
myElementContainer是包裹图片列表的容器。
配置参数
{
align: ‘center’,
autoResize: false,
comparator: null,
container: $(‘body’),
direction: undefined,
ignoreInactiveItems: true,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
offset: 2,
onLayoutChanged: undefined,
outerOffset: 0,
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined
}
align：对齐方式是，可选值有：”left”, “right”, “center”。
autoResize：如果设置为true，会在浏览器尺寸改变时更新瀑布流布局。
resizeDelay：默认值是50，单位毫秒。更新瀑布流布局的延迟时间。
comparator：一个自定义的排序函数。
container：使用该元素的宽度来计算瀑布流网格布局的列数。默认是window。例如：$(‘myContentGrid’)，该容器的CSS属性必须有position: relative。
direction：设置布局从顶部的左边还是右边开始。可选值：left或right。
ignoreInactiveItems：如果设置为true，无效的项任然是可见的。用于淡入淡出过滤图片。
itemWidth：第一个网格的默认宽度，可以是像素值，默认值200；或百分比值，默认值10%。
fillEmptySpace：如果设置为true，会在每一列的底部使用空白的网格来填补，使每一列都底部对齐。占位元素都带有class wookmark-placeholder。
flexibleWidth：基于浏览器的宽度来制作响应式的瀑布流网格布局，可选值true或false。
offset：各个网格项的水平和垂直间距。默认值为2。
onLayoutChanged：在网格布局发生改变时的回调函数。
outerOffset：默认值为0。网格布局和父元素之间的距离。
