圖片庫 - Pinterest喜歡與CSS佈局？

Question

我正在動態的php畫廊。 縮略圖將具有相同的寬度，但不同的高度。他們將從左到右放置。所以，我不想使用五列模式。 我想這不可能只用CSS來完成，所以也許你知道任何可以完成這項工作的jquery腳本？我想這樣的畫廊模式是很常見......

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

Answer 1

你可以嘗試使用/跳汰一個jQuery插件，像下面這樣：

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

或

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

Answer 2

這裏是純css解決方案使用css3列。這不會在舊的瀏覽器工作，read here (click).Live demo here (click).

您可以使用masonry.js，isotope.js，或者更兼容的JS解決方案packery.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 3

如果你想使佈局的「pintrest」的方式，你可以有x列的一個陣列，並通過每列重複檢查最短的高度，並添加該列中的下一個框。

這樣你就會知道它適用於所有瀏覽器[除非它們禁用了js]，然後你可以設置列的寬度。