jQuery Wookmark瀑布流插件

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

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

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

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 属性 "position: relative"。	$('body')
align	对齐方向，可设置为："left", "right", "center"。	center
direction	排序方向。可设置为："left"（从左至右）, "right"（从右至左）若不设置，则判断 align 为 "right" 时，direction 为 "right"，否则默认为 "left"	undefined
autoResize	是否在浏览器窗口大小变化时进行重新布局。	false
resizeDelay	检测自动重新布局的间隔时间 (ms)。	50
itemWidth	列表项目的宽度 (px 或 %)。	0
flexibleWidth	列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。[Demo]	0
offset	列表项目的间距 (px)，横向纵向相同。	2
verticalOffset	列表项目纵向的间距 (px)，与 offset 配合即可分别设置横向与纵向的间距。	undefined
outerOffset	外部间距，与父容器顶部的间距。	0
ignoreInactiveItems	是否隐藏被过滤的项目列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。[Demo]	true
fillEmptySpace	是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。[Demo]	false
comparator	自定义排序方法是否隐藏被过滤的项目列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。[Demo]	null
onLayoutChanged	布局变化时触发的函数。	null

jQuery Wookmark瀑布流插件 收藏

HTML

引入wookmark插件

调用wookmark瀑布流插件

wookmark中文API

jQuery Wookmark瀑布流插件
收藏