图片库 – Pinterest喜欢用CSS布局？

我正在开发一个动态的PHP库。 缩略图将具有相同的宽度但不同的高度。 它们将从左到右放置。 所以，我不想使用五列模式。 我想这不可能只用CSS做，所以也许你知道任何jquery脚本可以完成这项工作吗？ 我想这种画廊模式很常见……

http://sofzh.miximages.com/javascript/Xwdx0.png

Answer 1

这是使用css3列的纯css解决方案。 这在旧版浏览器中不起作用， 请在此处阅读（单击）。 这里现场演示（点击）。

您可以使用masonry.js，isotope.js或packery.js来获得更兼容的js解决方案。

CSS：

 .col-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .col-5 > div { display: inline-block; } .sm { height: 75px; } .lg { height: 125px; } 

Answer 2

您可以尝试使用/ jigging Jquery插件，如下所示：

http://codecanyon.net/item/jquery-tiles-gallery/2281417

要么

http://codecanyon.net/item/jbmarket-image-gallery/full_screen_preview/3028128?ref=lamdang

Answer 3

如果您尝试将布局设置为“pintrest”方式，则可以使用x列数组并遍历每列以检查最短高度，并在该列中添加下一个框。

这样你会知道它适用于所有浏览器[除非他们有js禁用]然后你可以设置列的宽度。