jQuery 瀑布流插件: Wookmark

原文链接: jQuery Wookmark

在线示例: jQuery Wookmark Demo

Wookmark官网: http://www.wookmark.com/jquery-plugin

翻译人员: 铁锚

原文日期: 2013年03月05日

翻译日期: 2014年02月22日



当你第一次打开 图片分享网站Pinterest 时,你可能会由衷地赞叹: "哇,每列图的宽度都是相同的,而所有的图片都被裁剪显示为正确的比例." 

普通用户可能觉得没什么,但作为一名开发人员,我可以领会到他们对设计、创新和实现的努力,包括服务器端和客户端。这也是我爱上 Wookmark 的原因 —— 用来创建一致图像布局效果的jQuery插件.



下面我们一起来看看如何使用 Wookmark插件 :

开发的工作大概只需要几分钟即可完成。首先是将img图片以某种标签包装起来,比如我们可以使用列表
<li>:

<ul id="tiles">
	<li><img src="data:images/image_1.jpg" width="200" height="283"><p>1</p></li>
	<li><img src="data:images/image_2.jpg" width="200" height="300"><p>2</p></li>
	<li><img src="data:images/image_3.jpg" width="200" height="252"><p>3</p></li>
	<li><img src="data:images/image_4.jpg" width="200" height="158"><p>4</p></li>
	<li><img src="data:images/image_5.jpg" width="200" height="300"><p>5</p></li>
	<li><img src="data:images/image_6.jpg" width="200" height="297"><p>6</p></li>
	<li><img src="data:images/image_7.jpg" width="200" height="200"><p>7</p></li>
	<li><img src="data:images/image_8.jpg" width="200" height="200"><p>8</p></li>
	<li><img src="data:images/image_9.jpg" width="200" height="398"><p>9</p></li>
	<li><img src="data:images/image_10.jpg" width="200" height="267"><p>10</p></li>
	<li><img src="data:images/image_1.jpg" width="200" height="283"><p>11</p></li>
	<li><img src="data:images/image_2.jpg" width="200" height="300"><p>12</p></li>
	<li><img src="data:images/image_3.jpg" width="200" height="252"><p>13</p></li>
	<!-- ... -->
</ul>

图像应该在服务器端预先设置相同的宽度,当然,如有必要,你也可以在客户端强制改变其宽度。图片HTML创建好之后,就可以使用jQuery插件来做那些杂乱的工作:

$(document).ready(new function() {
	// 调用插件的布局函数.
	$('#tiles li').wookmark({
		autoResize: true,         // 当浏览器大小改变时会自动更新布局
		container: $('#tiles'),   // 可选配置项, 用于一些额外的CSS样式
		offset: 2,                // 可选配置项, 表格项(item)的间距
		itemWidth: 210            // 可选配置项, 表格项(item)的宽度
	});
});

Wookmark还包括一些额外的选项用来自定义 列的外观,并可以在 window 改变大小时调整列宽  —— 非常棒的特性!

Wookmark是一心只做一件事又做得非常好的插件,。如果你想创建一个优雅,且风格统一的照片画廊(gallery),用Wookmark试一试,我认为你将会留下深刻的印象!



官方指导手册:http://www.wookmark.com/jquery-plugin

翻译如下:



1. 从Github下载 Wookmark-jQuery插件: 或者
点击此处下载ZIP包

2. 在引入jQuery之后引入script:

<script type="text/javascript" src="jquery.wookmark.js"></script>

3. 在 JS代码之中调用:

$('#myContent li').wookmark();

4. 根据需要,设置一些可选的配置项: (在GitHub仓库 和 ZIP包之中有示例 )

• align - 对齐: "left", "right", 或 "center"
• autoResize - 如果设置为 "true", 当浏览器窗口大小改变时将自动更新布局
• resizeDelay - 默认值 "50",单位: 毫秒(milisecond),在浏览器 resize之后重新布局的延迟时间
• comparator - 指定自定义排序函数(sorting function)
• container - 该元素的 width 将被用于计算列的数量, 默认是 "window". 例如: $('myContentGrid'). Container 应该设置 CSS 属性 "position: relative".
• direction - 方向: "left" or "right", 从左上角还是右上角开始排列元素
• ignoreInactiveItems - 如果设置为 "true", 则不活跃的 items 也会可见,该选项可用于对过滤掉的  items 执行淡出效果
• itemWidth - 单个 grid item 的width,可使用像素值(例如 "200") 或者百分比 ("10%"), 默认值为第一个 item 的  width
• fillEmptySpace - 如果设置为 "true", 在每一列的底部创建占位符(placeholder ),以创建相等的布局. Placeholders 元素会被设置CSS类 "wookmark-placeholder".
• flexibleWidth - "true" or "false", 基于浏览器窗口的大小调整 item width 以创建最优布局
• offset - 在 items 之间的(水平,垂直)间距, 默认值为 2
• onLayoutChanged - 一个回调函数,当所有的布局改变后调用
• outerOffset - 默认值为 "0"

查看示例(排序、过滤、冲压、无尽的滚动,lightbox,API集成…)以及贡献名单,请访问 Wookmark on github。希望你玩得开心。