瀑布流-Wookmark jQuery plugin 插件

原文链接:  jQuery Wookmark
在线示例:  jQuery Wookmark Demo

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

当你第一次打开 图片分享网站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试一试,我认为你将会留下深刻的印象!

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

1. 从Github下载 Wookmark-jQuery插件
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"

效果展示：http://test.txlxx.com/www/class