html css瀑布流布局,纯css瀑布流布局

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

效果图

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

column-count: 4; //想要分割的列数

column-gap: 10%; //每列的边距

和在子容器的

break-inside: avoid;

// auto 指定既不强制也不禁止元素内的页/列中断。

// avoid 指定避免元素内的分页符。

// avoid-page 指定避免元素内的分页符。

// avoid-column 指定避免元素内的列中断。

// avoid-region 指定避免元素内的区域中

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

vue

.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;

}

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:`

{{h}}

`

}

}

})

爱心发射biu.gif