图片库-Pinterest是否喜欢使用CSS进行布局？

Question

我正在动态PHP画廊。 缩略图将具有相同的宽度，但高度各不相同。 它们将从左到右放置。 因此，我不想使用五列模式。 我猜想不可能仅使用CSS来做到这一点，所以也许您知道任何可以完成这项工作的jquery脚本？ 我猜这种画廊模式很普遍。

http://i.stack.imgur.com/Xwdx0.png

Answer 1

这是使用css3列的纯css解决方案。 在较旧的浏览器中将无法使用此功能， 请在此处阅读（单击）。 现场演示在这里（单击）。

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

<div class="col-5">
  <div class="sm"></div>
  <div class="lg"></div>
  <div class="sm"></div>
  <div class="sm"></div>
  <div class="lg"></div>

  <div class="lg"></div>
  <div class="sm"></div>
  <div class="lg"></div>
  <div class="lg"></div>
  <div class="lg"></div>  
</div>

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

您可以尝试使用/跳动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），然后您可以设置列宽的样式。