实现思路

依赖column便可实现最简单实用的瀑布流布局

代码

我这里前端框架用的是Vue, 用其他的也一样

HTML

1
2
3
4
5
6
7
<div class="waterfall">
        <div v-for="(item,index) in 20"
             :style="{height:heights[Math.floor(Math.random()*4)] + 'px',background:colors[Math.floor(Math.random()*12)]}"
             :key="index">
            {{item}}
        </div>
    </div>

Script

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    export default {
        data() {
            return {
                //模拟随机高度
                list: [200, 250, 150, 300],
                //颜色尽量随机,区别每个模块
                colors: ['#eccf2c', '#b8232c', '#125d9e', '#367945', '#fca91b', '#26ada7', '#77bfbf', '#ff5c87',
                    '#f40', '#ee2061', '#feee39', '#f5a79a', '#ec70d0', '#b4a1cf']
            }
        }
    }
</script>

Css

1
2
3
4
5
6
7
8
<style scoped>
    .waterfall {
        width: 400px;
        margin: 0 auto;
        column-count: 3;
        column-gap: 10px;
    }
</style>

column-count: 3;内容均分三份

column-gap: 10px; 列之间的间距

效果:

1.png

此时你会发现 8 和15分头行动了,此时还需要给子元素加一个属性

break-inside: avoid;

这样就不会被分割了

如下:

2.png

具体需要什么效果看自己需求取舍就行

兼容问题

肯定会有小伙伴说你这兼容性不行啊, ie 10以下怎么办

解决办法也不是没有

那就是:

以后面试的时候先问好需不需要兼容ie, 如果需要, 赶紧撤乎, 从根本上解决问题, 还能省几根头发