谈起Wookmark我想做过前端的大侠都不会觉得陌生,它就是远近闻名的流布局jQuery插件,这个插件使用起来非常简单,需要引入两个js:
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.wookmark.min.js"></script>
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"