<div class="waterfall-container">
  <div class="waterfall-item" style="height:100px">1</div>
  <div class="waterfall-item" style="height:300px">2</div>
  <div class="waterfall-item" style="height:400px">3</div>
  <div class="waterfall-item" style="height:100px">4</div>
  <div class="waterfall-item" style="height:300px">5</div>
  <div class="waterfall-item" style="height:400px">6</div>
  <div class="waterfall-item" style="height:400px">7</div>
  <div class="waterfall-item" style="height:300px">8</div>
  <div class="waterfall-item" style="height:700px">9</div>
  <div class="waterfall-item" style="height:200px">10</div>
</div>

css

* {
  margin: 0;
  padding: 0;
}

.waterfall-container {
  width: 100%;
  padding: 20px;
  /* 设置列数 */
  column-count: 2;
  /* 设置列间隙 */
  column-gap: 1px;
}

.waterfall-item {
  width: 100%;
  height: 100%;
  background-color: #ddd;
  color: #fff;
  font-size: 40px;
  text-align: center;
  text-shadow: 0 0 10px gray;
  margin-bottom: 10px;
}

.waterfall-item:nth-of-type(1) {
  background-image: url('./img/1.jpg');
}

.waterfall-item:nth-of-type(2) {
  background-image: url('./img/2.jpg');
}

.waterfall-item:nth-of-type(3) {
  background-image: url('./img/3.jpg');
}

.waterfall-item:nth-of-type(4) {
  background-image: url('./img/4.jpg');
}

.waterfall-item:nth-of-type(5) {
  background-image: url('./img/5.jpg');
}

.waterfall-item:nth-of-type(6) {
  background-image: url('./img/6.jpg');
}

.waterfall-item:nth-of-type(7) {
  background-image: url('./img/7.jpg');
}

.waterfall-item:nth-of-type(8) {
  background-image: url('./img/8.jpg');
}

.waterfall-item:nth-of-type(9) {
  background-image: url('./img/9.jpg');
}

.waterfall-item:nth-of-type(10) {
  background-image: url('./img/10.jpg');
}

代码演示：

202103081615173845158243