深圳市宝安区沙井华社塑胶经营部

今天小编跟大家讲解下有关CSS3实现瀑布流布局 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3实现瀑布流布局 的相关资料，希望小伙伴们看了有所帮助。

瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过css3的多列（Multi-column）属性，可以简单的实现类似效果。

具体步骤：

1.设置外部容器多列列数（column-count）和列间距（column-gap）

2.设置内容条目的break-inside属性为avoid，使条目总体不被打断。

html结构：

<div class="container"> //最外层容器 <div class="item">//条目 <div class="item__content">//条目内容 <img src='http://www.aidi.net.cn/article/detial/4338/'> </div> </div> <div class="item"> <div class="item__content"> <img src='http://www.aidi.net.cn/article/detial/4338/'> </div> </div> <!-- more items --> .........</div>

css样式：

.container { column-count: 4; //多列的列数 column-gap: 0;//列间距 }.item{ break-inside: avoid;//避免在主体框中插入任何中断（页面，列或区域）。}

以上为最核心代码，需要根据具体业务做进一步完善，如添加浏览器前缀，设置元素宽高及位置等等。

来源：爱蒂网