jQuery Wookmark Load 瀑布流布局
瀑布流布局非常适合大量图片的展示，一改过去裁剪图片尺寸统一的排版，每张图片都能完全展示，并错落有致，让人眼前一亮。
- 版本：
- jQuery v1.4.3+
- jQuery Wookmark Load v1.4.8
- 注意事项：
项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。（可以用 JavaScript 实时获取图片的宽高，但图片数量过多时，这将是一件不靠谱的事情。)
在线实例
实例预览 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 文件
<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');