关闭

Wookmark——瀑布流布局

标签: 瀑布流自适应图片
197人阅读 评论(0) 收藏 举报
分类:




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

注意事项:

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


Html

<!--
本例中,$("#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>

CSS 样式

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


载入 JavaScript 文件

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

用 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 布局变化时触发的函数。


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

中文文档:http://code.ciaoca.com/jquery/wookmark/


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:99181次
    • 积分:1740
    • 等级:
    • 排名:千里之外
    • 原创:60篇
    • 转载:58篇
    • 译文:6篇
    • 评论:11条
    最新评论