The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should." Basic web users probably think nothing of it but as a developer, I can appreciate the effort that went into creating that design, both on the server and client sides. That's why I've fallen in love with Wookmark, a jQuery plugin to create the same consistent layout effect with imagery.
当您访问Pinterest时遇到的第一件事是“哇，这些列的宽度相同，并且照片被剪裁得恰到好处。” 基本的Web用户可能对此一无所知，但作为一名开发人员，我将欣赏在服务器和客户端上创建该设计所付出的努力。 这就是为什么我爱上了Wookmark的原因， Wookmark是一个jQuery插件，用于创建与图像相同的一致布局效果。
Let me show you how to use Wookmark.
让我告诉您如何使用Wookmark。
View Demo 观看演示The amount to work the developer has to do can be completed in just a few minutes. Start by including the images in any format; this example uses a list:
开发人员要做的工作量仅需几分钟即可完成。 首先包括任何格式的图像； 本示例使用一个列表：
<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>Images should optimally be preprocessed on the server side to the same width, however, you can still force widths if desired. With the images in place, you can use the jQuery plugin to do the dirty work:
最好在服务器端将图像预处理为相同的宽度，但是，如果需要，您仍然可以强制宽度。 放置好图像后，您可以使用jQuery插件执行脏工作：
$(document).ready(new function() { // Call the layout function. $('#tiles li').wookmark({ autoResize: true, // This will auto-update the layout when the browser window is resized. container: $('#tiles'), // Optional, used for some extra CSS styling offset: 2, // Optional, the distance between grid items itemWidth: 210 // Optional, the width of a grid item }); });Wookmark also includes a few additional options to customize the look of columns and can resize the column widths to a window resize -- excellent!
Wookmark还包括一些其他选项，可自定义列的外观，并可以将列宽调整为窗口调整大小-太好了！
View Demo 观看演示Wookmark is a plugin that does one thing exceptionally well. If you'd like to create an elegant, uniform photo galleyy, give Wookmark a try and I think you will be impressed!
Wookmark是一款功能出色的插件。 如果您想创建一个优雅，均匀的照片厨房，请尝试一下Wookmark，我想您会留下深刻的印象！
翻译自: https://davidwalsh.name/wookmark
相关资源：jQuery瀑布流插件Wookmark使用实例