純CSS3實現瀑布流布局

豎向瀑布流

• html頁面結構
  

  <div class="masonry">
      <div class="item">
          <img src="" alt="">
      </div>
      <div class="item">
          <img src="" alt="">
      </div>
      <div class="item">
          <img src="" alt="">
      </div>
      ...
  </div>

• css樣式
  

  .masonry {
      column-count: 3;
  }
  
  .item {
      break-inside: avoid;
      box-sizing: border-box;
      padding: 10px;
  }
  
  @media (min-width: 400px) {
      .masonry {
          column-count: 3;
      }
  }
  
  @media (min-width: 1200px) {
      .masonry {
          column-count: 4;
      }
  }

• 頁面效果
  

橫向瀑布流

• html頁面結構
  

  <div class="masonry">
      <div class="item">
          <img src="" alt="">
      </div>
      <div class="item">
          <img src="" alt="">
      </div>
      <div class="item">
          <img src="" alt="">
      </div>
      ...
  </div>

• css樣式
  

  .masonry {
      display: flex;
      flex-wrap: wrap;
  }
  
  .masonry::after {
      content: '';
      flex-grow: 99999;
  }
  
  .item {
      flex-grow: 1;
      margin: 5px;
      position: relative;
      overflow: hidden;
  }

• 頁面效果
  

　　　注意：這種方法沒用到js的計算，所以有一個缺點 就是有一些圖片他其實是有缺失的，

參考網站： 
https://www.w3cplus.com/css/pure-css-create-masonry-layout.html
https://blog.csdn.net/cuiji4724/article/details/83860052