瀑布流布局

最新推荐文章于 2021-06-21 03:05:47 发布

忽晴忽雨的江湖

最新推荐文章于 2021-06-21 03:05:47 发布

阅读量445

点赞数

分类专栏： JS .NET 文章标签： jquery 前端开发布局瀑布流控件

.NET 同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

jQuery Wookmark 瀑布流布局来源

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

版本：

jQuery v1.4.3+

jQuery Wookmark v1.4.8

注意事项：

项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。（可以用 JavaScript 实时获取图片的宽高，但图片数量过多时，这将是一件不靠谱的事情，如果你执意要这么做，可以参考这个 Demo）

文档目录

使用方法
参数说明
相关信息

使用方法

载入 JavaScript 文件

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

CSS 样式

/* 
 * 父容器需要设置相对定位 
 * 项目需要设置隐藏 
 */ 
#list{position:relative;} 
#list li{display: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"。
direction	undefined	排序方向。可设置为："left"（从左至右）, "right"（从右至左）若不设置，则判断 align 为 "right" 时，direction 为 "right"，否则默认为 "left"。
autoResize	false	是否在浏览器窗口大小变化时进行重新布局。
resizeDelay	50	检测自动重新布局的间隔时间 (ms)。
itemWidth	0	列表项目的宽度 (px 或 %)。
flexibleWidth	0	列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。[Demo]
offset	2	列表项目的间距 (px)，横向纵向相同。
verticalOffset	undefined	列表项目纵向的间距 (px)，与 offset 配合即可分别设置横向与纵向的间距。
outerOffset	0	外部间距，与父容器顶部的间距。
ignoreInactiveItems	true	是否隐藏被过滤的项目。[Demo]
fillEmptySpace	false	是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。[Demo]
comparator	null	自定义排序方法。[Demo]
possibleFilters	[]
onLayoutChanged	undefined	布局变化时触发的函数。