Wookmark基于jQuery瀑布流JS插件
瀑布流现在被很多网站所使用,足见其有优越的浏览体验,创建瀑布流的效果并不难,我们可以使用很多方法去实现,JS插件是其常见的效果之一,Wookmark是一个基于jQuery的瀑布流插件。
现在很流行的一种网页布局效果,瀑布流,随意、洒脱,个性十足,一种代表时尚潮流的网页设计风格,如果你想在网页上使用瀑布流,Wookmark可以让你开拓思路,让你快速开发出瀑布流布局,jQuery瀑布流代码实例下载。
瀑布流布局效果目前来说还是挺流行的,从网页到手机应用,都能见到瀑布流的身影。相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的引用一下,再写那么一两句调用代码,然后就没我们什么事了,瀑布流就这么呈现出来了。Wookmark 这个插件的用法也是相当的简单。
使用方法
1、下载Wookmark
你可以访问Wookmark的Github地址,或者访问Wookmark的官网下载得到源文件,然后将文件解压到你的本地项目中,建议将JS和CSS文件分开放置。
2、引入插件文件
<script type="text/javascript" src="jquery.wookmark.js"></script>
3、调用插件
$('#tiles li').wookmark();
手动触发布局事件
// 根据需要,可以进行手动触发重新布局 $('#list').trigger('refreshWookmark');
带参数调用
$(function() { $('#tiles li').wookmark({ autoResize: true, // 当浏览器大小改变时是否自动调整 container: $('#main'), // 父容器,这个要注意的一点是该容器需要有 position: relative 属性。 offset: 2, // 每个元素之间的距离 itemWidth: 210, // 每个元素的宽度,瀑布流高度是不限制的,所以只要宽度固定就可以了 resizeDelay: 50 // 自动调整延迟时间,一般情况下不需要设置,默认的就好了。 }); });
该插件可以配合ajax来实现动态加载数据,不过新增之后需要重新执行一次。如果是采用
var handler = $('#tiles li'); handler.wookmark(options);
这种方式的在重新绑定前需要执行一下下面的代码,做点清理工作。
handler.wookmarkClear();
参数说明
名称 | 默认值 | 说明 |
---|---|---|
container | $('body') | 父容器。自定义时需要给父容器设置 CSS 属性 "position: relative"。 |
align | 'center' | 对齐方向,可设置为:"left", "right", "center"。 |
direction | undefined | 排序方向。可设置为:"left"(从左至右), "right"(从右至左)若不设置,则判断 align 为 "right" 时,direction 为 "right",否则默认为 "left"。 |
autoResize | false | 是否在浏览器窗口大小变化时进行重新布局。 |
resizeDelay | 50 | 检测自动重新布局的间隔时间 (ms)。 |
itemWidth | 0 | 列表项目的宽度 (px 或 %)。 |
flexibleWidth | 0 | 列表项目自适应的最大宽度。该项设置时,itemWidth 的值作为列表项目的最小宽度。 |
offset | 2 | 列表项目的间距 (px),横向纵向相同。 |
verticalOffset | undefined | 列表项目纵向的间距 (px),与 offset 配合即可分别设置横向与纵向的间距。 |
outerOffset | 0 | 外部间距,与父容器顶部的间距。 |
ignoreInactiveItems | true | 是否隐藏被过滤的项目。 |
fillEmptySpace | false | 是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。 |
comparator | null | 自定义排序方法。 |
possibleFilters | [] | |
onLayoutChanged | undefined | 布局变化时触发的函数。 |
相关连接
- 官方地址:http://www.wookmark.com/jquery-plugin
- 官方下载:https://github.com/GBKS/Wookmark-jQuery
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
上一篇: Dewplayer 轻量级音乐播放器插件
下一篇: FIS3 为你定制的前端工程构建工具
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论