jQuery Wookmark瀑布流插件

本文演示了15种瀑布流演示实例，其中有AMD 加载器、无限滚动、支持灯窗插件、动态读取图片尺寸、PHP 加载数据、远程 API 加载数据、排序等。

分类：其它特效 > 瀑布流难易：初级

查看演示下载资源下载积分： 50 积分

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_10.jpg" width="200" height="267"><p>30</p></li>
    </ul>
</div>

引入wookmark插件

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

调用wookmark瀑布流插件

(function($) {
    $('#tiles li').wookmark({
        autoResize: true,
        container: $('#main'),
        offset: 5,
        outerOffset: 10,
        itemWidth: 210
    });
})(jQuery);

wookmark中文API

参数	描述	默认值
container	父容器。自定义时需要给父容器设置 CSS 属性	$('body')
align	对齐方向，可设置为：	center
direction	排序方向。可设置为：	undefined
autoResize	是否在浏览器窗口大小变化时进行重新布局。	false
resizeDelay	检测自动重新布局的间隔时间 (ms)。	50
itemWidth	列表项目的宽度 (px 或 %)。	0
flexibleWidth	列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。	0
offset	列表项目的间距 (px)，横向纵向相同。	2
verticalOffset	列表项目纵向的间距 (px)，与 offset 配合即可分别设置横向与纵向的间距。	undefined
outerOffset	外部间距，与父容器顶部的间距。	0
ignoreInactiveItems	是否隐藏被过滤的项目列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。	true
fillEmptySpace	是否填充底部占位符。占位符的 class 为	false
comparator	自定义排序方法是否隐藏被过滤的项目列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。	null
onLayoutChanged	布局变化时触发的函数。	null