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。网格布局和父元素之间的距离。

关于该瀑布流布局更详细的信息请参考：https://github.com/germanysbestkeptsecret/Wookmark-jQuery