CSS3 实现瀑布流布局 - JavaScript 编程网

瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过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;//避免在主体框中插入任何中断（页面，列或区域）。
}

声明：本站所有文章和图片，如无特殊说明，均为原创发布，转载请注明出处。