css中有幾種瀑布流的布局，我這里使用的是column的多列布局，效果如下
效果圖
這邊主要得技術(shù)就只有三句，在父容器的
column-count: 4; //想要分割的列數(shù)
column-gap: 10%; //每列的邊距
和在子容器的
break-inside: avoid;
// auto 指定既不強(qiáng)制也不禁止元素內(nèi)的頁(yè)/列中斷。
// avoid 指定避免元素內(nèi)的分頁(yè)符。
// avoid-page 指定避免元素內(nèi)的分頁(yè)符。
// avoid-column 指定避免元素內(nèi)的列中斷。
// avoid-region 指定避免元素內(nèi)的區(qū)域中
下面的完整的代碼(我是把它寫在了vue的組件里了，大家不用管我這個(gè)數(shù)據(jù)渲染形式，主要的是那個(gè)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>
愛心發(fā)射biu.gif
