纯CSS实现瀑布流布局

原理:

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

Demo:

👉 在 CodePen 中打开

  • HTML

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//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