jquery动态网格瀑布流插件Wookmark

jquery动态网格瀑布流插件Wookmark

 UI  fishcity  9个月前 (10-10)  2340浏览

Wookmark是Wookmark.com为了让亲们轻松的创建出其网站的效果而做的一个jquery动态网格瀑布流插件，参数丰富，使用简单。源码中包含了许多实例，大大的方便于项目的使用。

jquery实例：Wookmark使用方法

引入核心文件

1 2 3 4 5

<!-- 引入jquery -->   <script src="../libs/jquery.min.js"></script>     <!-- 引入wookmark插件 -->   <script src="../jquery.wookmark.js"></script>

构建html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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初始化

1	$('#tiles li').wookmark();

参数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$('.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"

 

转载请注明：jQ酷 » jquery动态网格瀑布流插件Wookmark

 

下载地址：本站下载 | 百度云 | 官方下载