javascript - 图片库 - Pinterest 喜欢使用 CSS 进行布局吗？

Question

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

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

Answer 1

这是使用 css3 列的纯 css 解决方案。这在旧版浏览器中不起作用，read here (click). <强> Live demo here (click).

您可以使用 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;
}