Wookmark是一款展示动态网格的插件，查看Workmark官网资料，可以找到示例

这款插件功能很多，有网格图片过滤功能，排序功能等等，非常实用

用bower或者npm安装

bower install wookmark-jquery

npm install wookmark

jQuery版本

jQuery – 1.5.3 or better

文件引入

wookmark.js
wookmark.min.js
css/main.css

使用方法

插件默认有不同的使用方法，可选

默认不使用jQuery

var wookmark = new Wookmark('#myElementContainer'[, options ]);

使用jQuery

$('#myElementContainer').wookmark(options);

实例化选项

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

 
在线预览 网盘下载

网盘下载密码：gctu

原创文章，转载请注明来自：http://www.bluestep.cc/?p=3116