column-count实现瀑布流布局
关键:
.waterfall {
column-count: 4; //列数
column-gap: 0;
}
.item{
box-sizing: border-box;
//避免截断
break-inside:avoid;
}
- 问题:数据会变为上下顺序显示。
关键:
.waterfall {
column-count: 4; //列数
column-gap: 0;
}
.item{
box-sizing: border-box;
//避免截断
break-inside:avoid;
}