纯CSS实现瀑布流布局

原理：

1. column-count: n 将元素中的文本分为 n 列
2. break-inside: avoid 避免元素内部断行并产生新列
   • 可以不加，但可能会影响布局效果

Demo:

👉 在 CodePen 中打开

• HTML

html5
  div#container // 外部容器
    ul#waterfall // 瀑布流容器
     - for(let i=0;i<12;i++ )
      li.item // 内部项目
        // 生成随机高度
        - let height = Math.ceil(Math.random() *(150+1-500)+500)
          // 模拟不同高度图片
          div(class='img',style='height:'+height+'px')
          // 模拟介绍文本
          p Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus culpa cupiditate a aperiam libero aspernatur unde

• CSS

//reset
*
 padding 0
 margin 0
// 外部容器
#container
  width 1200px
  margin 30px auto
  // 瀑布流容器
  #waterfall
    column-count 3
    list-style-type none
    // 内部项目
    .item
      padding 10px
      margin 0 10px 20px
      break-inside avoid
      border: 2px solid #000
      div.img
        background red

✨ 更新 2021年11月2日

以前一直不知道 break-inside: avoid 如果不加的话，“可能会影响布局效果” 所描述的 影响 是怎么样的，过去了那么多年终于让我遇到了一次，可以很明显的从下图看到第二列的首个元素被截断了。

一开始我一直以为是背景色是白色的缘故，直到我看到了列表最尾部，那段被截掉的头部。那么让我们给子元素加上 break-inside: avoid 看看效果。

记得是给 子元素 这个属性哦，不是瀑布流容器。

我最开始认为是给列表容器加这个属性的，一直都不生效还以为因为兼容性的关系没办法应用呢，直到我尝试着给子元素加上试试看….太尴尬了，hhhhhhh。

---

文档

column-count - CSS（层叠样式表） | MDN
break-inside - CSS（层叠样式表） | MDN