问题描述：

我想使用div制作网格，我想确保它们都具有相同的宽度但不同的高度。我确实希望他们包装，但不是在一条新线上，而是在第一个可用的空间位置下。如果您需要任何解释，请告诉我！照片网格列布局

也或者这样：

column photo grid layout ]

我只需要一个简单的解释，但！谢谢！

答

纯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'); 
});

谢谢，我要深入了解！ @jcuenod – Mees

我正在玩flexbox，我的确找到了一种方法，我只是不喜欢我是如何做到的。我制作了三行，所有div或图像宽度相同，但高度不同，还有一个display：block，但是我在YouTube上看到了这个视频，我不知道如何在没有Flexbox的情况下做到这一点。我每天都在学习新事物！ – Mees

答

Isotope javascript plugin有不正是你想要的布局模式。您可以使用示例预览布局。如果您没有任何JavaScript技能，您可以使用数据属性。

答

我这样做的方式是先仔细看看你的图像，你会注意到3列。

这3列的3周不同的div容器中浮子和宽度：33.33％或内联块产生相同的结果。

在这个列里面是您的项目是身高：汽车虽然div总是这样工作。

花哨的白色空间是由该块的代码

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

而是采用保证金或填充，我们使用的边界进行。这个边框将作为一个独立的填充物，不会扩展div中的背景色，同时不会在物品之外创建边缘，从而将其推出设计。这将保持33.33％宽度的外观。

希望有帮助

这正是我所做的，我只是想要一些不同的东西。 – Mees

如果你想要另一个可以使用** position：absolute; **，你需要使用JavaScript来完成。您需要根据高度和宽度记录项目的每个定位。我无法提供一个示例，因为我正在使用移动设备，但它的工作原理如何。 – masterpreenz

照片网格列布局

纯CSS解决方案（砌体布局没有Javascript）

使用JavaScript

相关推荐