「自学哈网」分享一个jquery动态网格瀑布流的插件

分享一个jquery动态网格瀑布流的插件—Wookmark

Wookmark是一个由Wookmark.com设计的jquery动态网格瀑布流插件，用户可以轻松创建他们的网站效果。它具有丰富的参数，使用方便。源代码中包含了许多示例，极大的方便了项目的使用。

jquery实例：Wookmark使用方法

引入核心文件

 < script src = "../libs/jquery.min.js" ></ script >  < script src = "../jquery.wookmark.js" ></ script >

构建html

< div id = "main" role = "main" > < ul id = "tiles" >  < 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 – 图层改变后调用的函数