纯CSS3实现瀑布流布局

• html页面结构
  

  <div class="masonry">
      <div class="item">
          <img src="" >
      </div>
      <div class="item">
          <img src="" >
      </div>
      <div class="item">
          <img src="" >
      </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;
      }
  }

• 页面效果
  

参考网站： https://www.w3cplus.com/css/pure-css-create-masonry-layout.html

纯CSS3实现瀑布流布局

原文：https://www.cnblogs.com/dadouF4/p/10655262.html