瀑布流布局

创建一个瀑布流式布局，特别适用于处理图片。

• 创建一个瀑布流式布局，由"砖块"组成，这些砖块可以垂直布局时具有固定的width，或者水平布局时具有固定的height，形成完美的拟合。在处理图片时特别有用。
• 定义.masonry-container，这是瀑布流布局的容器，以及.masonry-columns，一个内部容器，其中将放置.masonry-brick元素。
• 对.masonry-brick元素应用display: block，以使布局正确流动。
• 使用:first-child伪元素选择器为第一个元素应用不同的margin，以考虑其位置。
• 使用CSS变量和媒体查询实现更大的灵活性和响应性。

<div class="masonry-container">
  <div class="masonry-columns">
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1016/384/256"
      alt="一张图片"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1025/495/330"
      alt="另一张图片"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1024/192/128"
      alt="另一张图片"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1028/518/345"
      alt="再来一张图片"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1035/585/390"
      alt="还有一张"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1074/384/216"
      alt="最后一张"
    />
  </div>
</div>

/* 容器 */
.masonry-container {
  --column-count-small: 1;
  --column-count-medium: 2;
  --column-count-large: 3;
  --column-gap: 0.125rem;
  padding: var(--column-gap);
}

/* 列 */
.masonry-columns {
  column-gap: var(--column-gap);
  column-count: var(--column-count-small);
  column-width: calc(1 / var(--column-count-small) * 100%);
}

@media only screen and (min-width: 640px) {
  .masonry-columns {
    column-count: var(--column-count-medium);
    column-width: calc(1 / var(--column-count-medium) * 100%);
  }
}

@media only screen and (min-width: 800px) {
  .masonry-columns {
    column-count: var(--column-count-large);
    column-width: calc(1 / var(--column-count-large) * 100%);
  }
}

/* 砖块 */
.masonry-brick {
  width: 100%;
  height: auto;
  margin: var(--column-gap) 0;
  display: block;
}

.masonry-brick:first-child {
  margin: 0 0 var(--column-gap);
}