Wookmark-jQuery

Wookmark-jQuery 介绍

瀑布流布局非常适合大量 图片 的展示，一改过去裁剪 图片 尺寸统一的排版，每张 图片 都能完全展示，并错落有致，让人眼前一亮。

jQuery 插件 用于布局元素的动态网格,也就是大家常看到的瀑布流。? 项目中的 img 元素的 width 和 height 属性 需要写，否则定位会不准确。

载入 JavaScript 文件

<script src="jquery.js"></script>

<script src="jquery.wook mark.js "></script>

css 样式

/** 父容器 需要设置相对定位* 项目需要设置隐藏*/#list{position:relative;}#list li{ dis play:none;}

DOM 结构

<!--本例中，$("#list") 就是 父容器 ，内部的 li 就是要进行瀑布流布局的项目。当然也可以使用 div 或其他 标签 的来写。项目中的 img 元素的 width 和 height 属性 需要写，否则定位会不准确。--><ul id="list"><li><img src="pic_1.jpg" width="200" height="283"><p>text</p></li><li><img src="pic_2.jpg" width="200" height="300"><p>text</p></li>...<li><img src="pic_n.jpg" width="200" height="252"><p>text</p></li></ul>

调用 Wookmark

$('#list li').wookmark();// 自 定义参数 调用 $('#list li').wookmark({container: $('#list'),offset: 10,itemWidth: 200});

手动触发布局事件

// 根据需要，可以进行手动触发重新布局$('#list').trigger('refreshWookmark');

参数说明

名称 默 认值说明container$('body') 父容器 。 自定义 时需要给 父容器 设置 css 属性 "position: relative"。align'center'对齐方向，可设置为："left","right","center"。directionundefined排序方向。可设置为："left"（从左至右）,"right"（从右至左）若不设置，则判断 align 为 "right" 时，direction 为 "right"，否则 默 认为 "left"。autoResi zef alse是否在浏览器窗口大小变化时进行重新布局。resizeDelay50检测 自动 重新布局的间隔时间 (ms)。itemWidth列表项目的宽度 (px 或 %)。flexibleWidth列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。offset2列表项目的间距 (px)，横向纵向相同。verticalOffsetundefined列表项目纵向的间距 (px)，与 offset 配合即可分别设置横向与纵向的间距。outerOffset外部间距，与 父容器 顶部的间距。ig nor eInactiveItemstrue是否隐藏被过滤的项目。fillEmptySpacefalse是否填充 底部 占位符。占位符的 class 为 "wookmark-placeholder"。comp ara tornull 自定义 排序 方法 。possibleFilters[]onLayoutChangedundefined布局变化时触发的 函数 。 链接 : http://www.fly63.com/nav/1683

GitHub: https://github.com/germanysbestkeptsecret/Wookmark-jQuery

网站描述: 用于布局元素的动态网格的jQuery瀑布流 插件

Wookmark-jQuery官方网站

官方网站：

如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。

查看更多关于Wookmark-jQuery的详细内容...