照片网格列布局

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％宽度的外观。

希望有帮助