圖片庫-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），然后您可以設置列寬的樣式。