照片網格列布局

Question

我想使用div製作網格，我想確保它們都具有相同的寬度但不同的高度。我確實希望他們包裝，但不是在一條新線上，而是在第一個可用的空間位置下。如果您需要任何解釋，請告訴我！

這是相當多的想法：http://imgur.com/a/WmUya

也或者這樣：

]

我只需要一個簡單的解釋，但！謝謝！

Answer 1

純CSS解決方案（砌體佈局沒有Javascript）

它現在也可以做到這一點，而無需使用column-count的JavaScript（看看this tutorial）

.masonry { 
 
    column-count: 3; 
 
    column-gap: 5px; 
 
} 
 
img { 
 
    break-inside: avoid; 
 
    width: 100%; 
 
}

<div class="masonry"> 
 
    <img src="http://lorempixel.com/100/200/abstract" alt> 
 
    <img src="http://lorempixel.com/g/100/250/abstract" alt> 
 
    <img src="http://lorempixel.com/100/130/abstract" alt> 
 
    <img src="http://lorempixel.com/g/100/240/abstract" alt> 
 
    <img src="http://lorempixel.com/100/220/abstract" alt> 
 
    <img src="http://lorempixel.com/100/180/abstract" alt> 
 
    <img src="http://lorempixel.com/100/210/abstract" alt> 
 
    <img src="http://lorempixel.com/g/100/170/abstract" alt> 
 
</div>

使用JavaScript

舊的解決方案，你會發現一直很流行的是使用masonry庫 - 請參閱this example。

所有的，它需要的代碼是：

// init Masonry 
var $grid = $('.grid').masonry({ 
    // options... 
}); 
// layout Masonry after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
}); 

Answer 2

Isotope javascript plugin有不正是你想要的佈局模式。您可以使用示例預覽佈局。如果您沒有任何JavaScript技能，您可以使用數據屬性。

Answer 3

我這樣做的方式是先仔細看看你的圖像，你會注意到3列。

這3列的3周不同的div容器中浮子和寬度：33.33％或內聯塊產生相同的結果。

在這個列裏面是您的項目是身高：汽車雖然div總是這樣工作。

花哨的白色空間是由該塊的代碼

// update the value in your convenience 
border: 4px solid transparent; 
box-sizing: border-box; 

而是採用保證金或填充，我們使用的邊界進行。這個邊框將作爲一個獨立的填充物，不會擴展div中的背景色，同時不會在物品之外創建邊緣，從而將其推出設計。這將保持33.33％寬度的外觀。

希望有幫助