Wookmark——瀑布流布局

翻译 2016年08月30日 14:29:33




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

注意事项:

项目中的 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/


RecyclerView实现瀑布流布局

RecyclerView本身提供了三个LayoutManager的实现 LinearLayoutManager GridLayoutManager StaggeredGridLayoutManager...
  • tiankong1206
  • tiankong1206
  • 2015年07月27日 18:37
  • 44691

纯CSS3多列的瀑布流布局演示

网上的瀑布流布局大部分都是通过JS来求定位,但现在css3也可以做到了,你不需要使用一点js,就可以做出一个反应快速的CSS3瀑布流布局。 html代码: 1 convallis t...
  • anxin591025
  • anxin591025
  • 2015年12月30日 13:06
  • 1739

用Masonry和jQuery.lazyload插件实现网页瀑布流布局

瀑布流布局 我们常能在网上看到很多瀑布流布局的页面,尤其是很多图片网站,例如百度图片。这种最典型的瀑布流布局,每个元素的宽度是固定的,但图片长度各不相同,于是通过下图这种样子竖着排列了下来,达到...
  • jzj1993
  • jzj1993
  • 2015年03月21日 19:21
  • 2293

jQuery Wookmark 瀑布流布局

  • 2014年10月08日 17:58
  • 5.04MB
  • 下载

jQuery Wookmark 瀑布流布局

瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮。 注意事项: 项目中的 img 元素的 width 和 height 属性需要写,...
  • XingKong22star
  • XingKong22star
  • 2014年10月08日 17:50
  • 487

jQuery插件之-Wookmark瀑布流插件

瀑布流布局效果目前来说还是挺流行的,从网页到手机应用,都能见到瀑布流的身影。 相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的引用一下,...
  • u013864585
  • u013864585
  • 2014年05月26日 17:37
  • 310

jQuery 瀑布流插件: Wookmark

原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin...
  • renfufei
  • renfufei
  • 2014年02月22日 17:06
  • 7237

jquery动态网格瀑布流插件Wookmark

Wookmark是Wookmark.com为了让亲们轻松的创建出其网站的效果而做的一个jquery动态网格瀑布流插件,参数丰富,使用简单。源码中包含了许多实例,大大的方便于项目的使用。 jque...
  • npf_java
  • npf_java
  • 2015年10月20日 22:30
  • 297

瀑布流插件WookMark

WookMark是一款基于jquery的瀑布流插件,使用起来也非常的简单:1、调用jquery库;2、引用jquery.wookmark.min.js文件(可以去 https://github.com...
  • Miss_Audrey
  • Miss_Audrey
  • 2017年02月25日 16:13
  • 176

wookmark瀑布流,带示例

  • 2013年05月22日 16:49
  • 2.12MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Wookmark——瀑布流布局
举报原因:
原因补充:

(最多只允许输入30个字)