无论物品的高度如何，如何将元素一个放在另一个之下？

Question

如何将元素一个放在另一个下面，无论物品的高度如何？由于具有以下标记，因此要按以下方式放置元素：

.photo {
  display: inline-block;
  vertical-align: top;
  max-width: 160px;
  width: 100%;
  margin: 0px 20px 20px 0;
  background:red;
}

<div class="photo">
  <div class="photo__item photo__item_1"></div>
</div>
<div class="photo">
  <div class="photo__item photo__item_2"></div>
</div>
<div class="photo">
  <div class="photo__item photo__item_3"></div>
</div>
<div class="photo">
  <div class="photo__item photo__item_4"></div>
</div>
<div class="photo">
  <div class="photo__item photo__item_5"></div>
</div>
<div class="photo">
  <div class="photo__item photo__item_6"></div>
</div>

Answer 1

有几种方法可以做到这一点。

1. 使用css column属性模拟此效果，我发现this fiddle例如，您可以看到元素的定位方式。

2. 其他方式（我认为最可行）就是像@kukkuz之前所说的那样使用像masonry这样的插件，它几乎可以满足你所需的一切。

3. 使用javascript和css创建自己的网格，以便根据其他元素的位置定位每个元素（我不推荐），因为你必须做一些计算，这可能需要一些时间。