jQuery Wookmark Load 瀑布流布局实例演示

时间：2022-05-20 07:50:59

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

  • 版本：
  • jQuery v1.4.3+
  • jQuery Wookmark Load v1.4.8
  • 注意事项：

  • 项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。（可以用 JavaScript 实时获取图片的宽高，但图片数量过多时，这将是一件不靠谱的事情。)

  • github

在线实例

实例预览 Example 基本示例

实例预览 AMD 加载器

实例预览 Endless scroll 无限滚动

实例预览 Flexible width 弹性布局

实例预览 Lightbox 支持灯窗插件

实例预览 Load it all 动态读取图片尺寸

实例预览 Placeholders 底部占位符

实例预览 PHP server PHP 加载数据

实例预览 Remote API 远程 API 加载数据

实例预览 Filtering Or 筛选功能

实例预览 Filtering And 筛选功能

实例预览 Filtering Only 筛选功能

实例预览 Filtering Fade 筛选功能

实例预览 sorting排序基本示例

实例预览 stamping基本示例

使用方法

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.wookmark.js"></script>
复制

CSS 样式

  1. /* 
  2.  * 父容器需要设置相对定位 
  3.  * 项目需要设置隐藏 
  4.  */ 
  5. #list{position:relative;} 
  6. #list li{display:none;} 
复制

DOM 结构

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

调用 Wookmark

  1. $('#list li').wookmark(); 
  2.  
  3. // 自定义参数调用 
  4. $('#list li').wookmark({ 
  5.   container: $('#list'), 
  6.   offset: 10, 
  7.   itemWidth: 200 
  8. }); 
复制

手动触发布局事件

  1. // 根据需要，可以进行手动触发重新布局 
  2. $('#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 的值作为列表项目的最小宽度。
offset 2 列表项目的间距 (px)，横向纵向相同。
verticalOffset undefined 列表项目纵向的间距 (px)，与 offset 配合即可分别设置横向与纵向的间距。
outerOffset 0 外部间距，与父容器顶部的间距。
ignoreInactiveItems true 是否隐藏被过滤的项目。
fillEmptySpace false 是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。
comparator null 自定义排序方法。
possibleFilters []  
onLayoutChanged undefined 布局变化时触发的函数。

相关文章