用纯css样式搞定瀑布流,上次用了一个特殊的代码实现了,不过代码忘记保存导致找不到了,这里就先说两种方法,一个是flex布局,另一个是使用column-count属性
首先说一下使用column-count属性:
代码如下:
.list{
column-count: 2;//想要排成的列数
column-gap: 0;
}
效果图:
这里使用的都是组件,如果只给组件外面的盒子加这行代码,可以实现瀑布流效果,但会出现排版错误,这个是根据最短列的高度决定的(内容在列之间断开了),要解决的使用以下
.list {
column-count: 2;
column-gap: 10px;
}
.list>view{
break-inside: avoid-column;//防止内容在列之间断开
}
//页面重现重叠解决的
.list::after{
content:"";
display:table;
clear:both
}
效果如下:
再说一下flex布局:
.list{
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* 需要指定高度 */
height: 800px;
}
.item{
width: 25%;
}
.item img{
width: 100%;
}
这样也可以实现所想要的效果