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
