CSS多列实现瀑布流

CSS多列的常用属性
column-count: 5; —显示多少列
column-gap: 20px; —显示列的间距
column-fill: aut; —显示一列的铺满
注意点：为了防止多列在内部断裂，需要添加以下属性
break-inside: avoid;

HTML

<section>
    <figure>
      <img src="./image/pic10.png" alt="">
      <figcaption>往后余生，风花雪月</figcaption>
    </figure>
    <figure>
      <img src="./image/pic2.png" alt="">
      <figcaption>往后余生，风花雪月</figcaption>
    </figure>
    <figure>
      <img src="./image/pic3.png" alt="">
      <figcaption>往后余生，风花雪月</figcaption>
    </figure>
</section>

CSS

<style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background: #352323;
    }

    section {
      width: 96%;
      margin: 0 auto;
      column-count: 5;
      column-gap: 10px;
      column-fill: auto;
    }

    figure {
      border: 2px solid red;
      margin-bottom: 10px;
      padding: 5px;
      /* 避免在元素内部断行并产生新列 */
      break-inside: avoid;
    }

    figure img {
      display: block;
      width: 100%;
    }

    figcaption {
      color: #a77869;
      font-size: 18px;
      text-align: center;
      padding: 5px;
      font-weight: 700;
    }
  </style>