Html CSS和JS以不同高度呈现包含多个组件的列

我试图弄清楚我是如何设计这段代码的，以得到如下图所示的结果。我计划使用媒体查询并使其具有响应性，这很简单，但我不知道如何在不同高度的列中渲染图像。我似乎不知道这是如何实现的。按从左到右、从上到下的顺序渲染图像

---

这种布局称为砌石结构，有时也称为Pinterest网格。使用Flexbox进行上下订购很容易

.container{display:flex；flex direction:column；flex flow:wrap；}

然而，从左到右进行比较困难。您必须使用Javascript来重新排序，或者在CSS中一次排序一个元素

例如：

<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>