版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/npf_java/article/details/49284953
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"