Wookmark基于jQuery瀑布流JS插件

发布于 2017-07-10 10:22:51 字数 3332 浏览 2405 评论 0

瀑布流现在被很多网站所使用,足见其有优越的浏览体验,创建瀑布流的效果并不难,我们可以使用很多方法去实现,JS插件是其常见的效果之一,Wookmark是一个基于jQuery的瀑布流插件。

Wookmark基于jQuery瀑布流JS插件

现在很流行的一种网页布局效果,瀑布流,随意、洒脱,个性十足,一种代表时尚潮流的网页设计风格,如果你想在网页上使用瀑布流,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"。
directionundefined排序方向。可设置为:"left"(从左至右), "right"(从右至左)若不设置,则判断 align 为 "right" 时,direction 为 "right",否则默认为 "left"。
autoResizefalse是否在浏览器窗口大小变化时进行重新布局。
resizeDelay50检测自动重新布局的间隔时间 (ms)。
itemWidth0列表项目的宽度 (px 或 %)。
flexibleWidth0列表项目自适应的最大宽度。该项设置时,itemWidth 的值作为列表项目的最小宽度。
offset2列表项目的间距 (px),横向纵向相同。
verticalOffsetundefined列表项目纵向的间距 (px),与 offset 配合即可分别设置横向与纵向的间距。
outerOffset0外部间距,与父容器顶部的间距。
ignoreInactiveItemstrue是否隐藏被过滤的项目。
fillEmptySpacefalse是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。
comparatornull自定义排序方法。
possibleFilters[]
onLayoutChangedundefined布局变化时触发的函数。

相关连接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

娇女薄笑

文章 0 评论 0

biaggi

文章 0 评论 0

xiaolangfanhua

文章 0 评论 0

rivulet

文章 0 评论 0

我三岁

文章 0 评论 0

薆情海

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文