纯css瀑布流布局

css中有几种瀑布流的布局，我这里使用的是column的多列布局，效果如下

效果图

这边主要得技术就只有三句，在父容器的

column-count: 4;  //想要分割的列数
 column-gap: 10%; //每列的边距

和在子容器的

 break-inside: avoid;  
 // auto  指定既不强制也不禁止元素内的页/列中断。
 // avoid  指定避免元素内的分页符。
 // avoid-page  指定避免元素内的分页符。
 // avoid-column 指定避免元素内的列中断。
 // avoid-region  指定避免元素内的区域中

下面的完整的代码(我是把它写在了vue的组件里了，大家不用管我这个数据渲染形式，主要的是那个css)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <!-- vue cdn引用-->
<script type="text/javascript" src="https://unpkg.com/vue"></script>
    <style>
        .textBox{
            width: 500px;
            margin: 100px auto;
            column-count: 4;
            column-gap: 10%;
        }
        .hBox{
            break-inside: avoid;
            width: 130px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>

<body>

<div id="app">
    <column-grop :harr = 'harr'></column-grop>
</div>

<script>
    const VM = new Vue({
        el:'#app',
        data:{
            harr:['70','80','185','62','90','100','75','162','88','97','86','180']
        },
        components:{
            columnGrop:{
                props:['harr'],
                template:`
                    <div class="textBox">
                        <div class="hBox" v-for="h in harr" :key="h" :style="{height:h + 'px',lineHeight:h + 'px'}">{{h}}</div>
                    </div>
                `
            }
        }
    })

</script>
</body>
</html>

爱心发射biu.gif