CSS和JS用于呈现具有不同高度的多个组件的列

Question

我正在试图弄清楚如何设置这段代码以获得如下图所示的结果。我计划使用媒体查询并使其响应，这很简单，但我无法弄清楚如何在列中呈现图像但具有不同的高度。我似乎无法理解如何实现这一目标。以DOM从左到右，从上到下呈现图像。

<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
<div><img src="4.jpg" /></div>
<div><img src="5.jpg" /></div>
<div><img src="6.jpg" /></div>
<div><img src="7.jpg" /></div>
<div><img src="8.jpg" /></div>
<div><img src="9.jpg" /></div>
<div><img src="10.jpg" /></div>
<div><img src="11.jpg" /></div>
<div><img src="12.jpg" /></div>

Answer 1

这种类型的布局称为砌体或有时称为Pinterest Grid。使用Flexbox进行上下订购很容易。

.container { display: flex; flex-direction: column; flex-flow: wrap; }

然而，从左到右进行比较困难。您将不得不使用Javascript重新排序或一次在CSS中对一个元素进行排序。

示例：https://codepen.io/collection/nLPmVa/