分享一个jquery动态网格瀑布流的插件—Wookmark
Wookmark是一个由Wookmark.com设计的jquery动态网格瀑布流插件，用户可以轻松创建他们的网站效果。它具有丰富的参数，使用方便。源代码中包含了许多示例，极大的方便了项目的使用。
jquery实例：Wookmark使用方法
引入核心文件
<!-- 引入jquery --> <script src="../libs/jquery.min.js"></script> <!-- 引入wookmark插件 --> <script src="../jquery.wookmark.js"></script> |
构建html
<div id="main" role="main"> <ul id="tiles"> <!-- These are our grid blocks --> <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li> <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li> <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li> <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li> <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li> <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li> <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li> <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li> <!-- 可添更多的内容 --> </ul> </div> |
写入JS初始化
$('#tiles li').wookmark(); |
参数
$('.myElements').wookmark({ 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 – item的宽度，可以是像素，也可以是百分比。 默认为个项目的宽度。
fillEmptySpace – 如果为 “true”,在每一列的底部会用一个空白的item填满对齐。
flexibleWidth – “true” or “false”, 基于浏览器的大小动态调整item的尺寸。
offset – item与item间横向坚向的间隔, 默认为 2
onLayoutChanged – 图层改变后调用的函数
outerOffset – 默认值 “0”
演示地址：http://www.jqcool.net/demo/201410/jquery-wookmark/
中文文档说明：http://code.ciaoca.com/jquery/wookmark/demo/load-images
文章来源网络，作者：运维，如若转载，请注明出处：https://shuyeidc.com/wp/115246.html<
