实现思路
依赖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;
列之间的间距
效果:

此时你会发现 8 和15分头行动了,此时还需要给子元素加一个属性
break-inside: avoid;
这样就不会被分割了
如下:

具体需要什么效果看自己需求取舍就行
兼容问题
肯定会有小伙伴说你这兼容性不行啊, ie 10以下怎么办
解决办法也不是没有
那就是:
以后面试的时候先问好需不需要兼容ie, 如果需要, 赶紧撤乎, 从根本上解决问题, 还能省几根头发