原文链接: jQuery Wookmark
在线示例: jQuery Wookmark Demo
Wookmark官网:/jquery-plugin
翻译人员: 铁锚
原文日期: 03月05日
翻译日期: 02月22日
当你第一次打开 图片分享网站Pinterest 时,你可能会由衷地赞叹: "哇,每列图的宽度都是相同的,而所有的图片都被裁剪显示为正确的比例."
普通用户可能觉得没什么,但作为一名开发人员,我可以领会到他们对设计、创新和实现的努力,包括服务器端和客户端。这也是我爱上 Wookmark 的原因 —— 用来创建一致图像布局效果的jQuery插件.
下面我们一起来看看如何使用 Wookmark插件 :
开发的工作大概只需要几分钟即可完成。首先是将img图片以某种标签包装起来,比如我们可以使用列表 <li>:
<ul id="tiles"><li><img src="images/image_1.jpg" width="200" height="283"><p>1</p></li><li><img src="images/image_2.jpg" width="200" height="300"><p>2</p></li><li><img src="images/image_3.jpg" width="200" height="252"><p>3</p></li><li><img src="images/image_4.jpg" width="200" height="158"><p>4</p></li><li><img src="images/image_5.jpg" width="200" height="300"><p>5</p></li><li><img src="images/image_6.jpg" width="200" height="297"><p>6</p></li><li><img src="images/image_7.jpg" width="200" height="200"><p>7</p></li><li><img src="images/image_8.jpg" width="200" height="200"><p>8</p></li><li><img src="images/image_9.jpg" width="200" height="398"><p>9</p></li><li><img src="images/image_10.jpg" width="200" height="267"><p>10</p></li><li><img src="images/image_1.jpg" width="200" height="283"><p>11</p></li><li><img src="images/image_2.jpg" width="200" height="300"><p>12</p></li><li><img src="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试一试,我认为你将会留下深刻的印象!
官方指导手册:/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 的 widthfillEmptySpace- 如果设置为 "true", 在每一列的底部创建占位符(placeholder ),以创建相等的布局. Placeholders 元素会被设置CSS类 "wookmark-placeholder".flexibleWidth- "true" or "false", 基于浏览器窗口的大小调整 item width 以创建最优布局offset- 在 items 之间的(水平,垂直)间距, 默认值为 2onLayoutChanged- 一个回调函数,当所有的布局改变后调用outerOffset- 默认值为 "0" 查看示例(排序、过滤、冲压、无尽的滚动,lightbox,API集成…)以及贡献名单,请访问 Wookmark on github。希望你玩得开心。
