admin
瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过CSS3的多列（Multi-column）属性，可以简单的实现类似效果。
具体步骤：
1.设置外部容器多列列数（column-count）和列间距（column-gap）
2.设置内容条目的break-inside属性为avoid，使条目总体不被打断。
<div class="container"> //最外层容器 <div class="item">//条目 <div class="item__content">//条目内容 <img src=''> </div> </div> <div class="item"> <div class="item__content"> <img src=''> </div> </div> <!-- more items --> ......... </div>
.container {
column-count: 4; //多列的列数
column-gap: 0;//列间距
}
.item{
break-inside: avoid;//避免在主体框中插入任何中断（页面，列或区域）。
}
声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。
真诚赞赏，手留余香
赞赏
