最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery Wookmark瀑布流插件

来源:http://www.erdangjiade.com/ 沐浴春风 2015-09-04 15:15浏览(1605)

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

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

jQuery Wookmark瀑布流插件
分类:其它特效 > 瀑布流 难易:初级
查看演示

加我微信,拉你进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
标签: 瀑布流Wookmark
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/477.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    08-03 19:48
    ngu137
    很不错的图片预览插件
  • 头像 沙发
    04-23 20:07
    ngu137
    很不错的实用的瀑布流插件。。。
1 2