纯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 看看效果。

加上break-inside:avoid之后

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

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


文档

column-count - CSS(层叠样式表) | MDN
break-inside - CSS(层叠样式表) | MDN