css实现瀑布流布局

css实现瀑布流布局

实现思路

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

代码

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

html

<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

<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

<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, 如果需要，赶紧撤乎，从根本上解决问题，还能省几根头发。