jQuery Wookmark瀑布流插件_其它特效_瀑布流_瀑布流_Wookmark

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

淘建站为您提供更多_其它特效_瀑布流_瀑布流_Wookmark，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 286 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

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

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