纯css瀑布流

  <style>
    .box{
      column-count: 3;
      column-gap: 10px;
      margin: 10px;
      /* column-fill: auto; */
    }
    .item{
      width: 25%;
      border: 1px solid chartreuse;
      /* overflow:auto; */
      break-inside: avoid;  // 必不可少，否则div会换行
    }
    .item1{
      height: 100px;
      border-color: chocolate;
    }
    .item2{
      height: 200px;
      border-color: black;
    }
    .item3{
      height: 150px;
    } 
    .item4{
      height: 400px;
    } 
  </style>
  <div class="box">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item4"></div>
    <div class="item item3"></div>
    <div class="item item2"></div>
    <div class="item item4"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item3"></div>
  </div>