css制作瀑布流布局

<ul class="grid">
  <li><img src="image1.jpg"></li>
  <li><img src="image2.jpg"></li>
  <li><img src="image3.jpg"></li>
  <li><img src="image4.jpg"></li>
  <li><img src="image5.jpg"></li>
  <li><img src="image6.jpg"></li>
  <li><img src="image7.jpg"></li>
  <li><img src="image8.jpg"></li>
  <li><img src="image9.jpg"></li>
</ul>

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 3; /* 列数 */
  column-gap: 10px; /* 列间距 */
}
.grid li {
  break-inside: avoid-column; /* 禁止拆分列 */
  margin-bottom: 10px; /* 行间距 */
}

.grid li img {
  max-width: 100%;
  height: auto;
}