html - 无论元素的高度如何，如何将元素一个放在另一个下？

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. 其他方法(我认为最可行)是使用像 masonry 这样的插件正如@kukkuz 之前所说，它几乎可以满足您的所有需求。

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