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=''>
         </div>
     </div>
     <div class="item">
         <div class="item__content">
              <img src=''>
         </div> 
     </div>
     <!-- more items --> 
        .........
</div>        

 

css樣式：

 

.container {
    column-count: 4; //多列的列數
    column-gap: 0;//列間距
 }

.item{
    break-inside: avoid;//避免在主體框中插入任何中斷（頁面，列或區域）。
}

 

 

 

以上為最核心代碼，需要根據具體業務做進一步完善，如添加瀏覽器前綴，設置元素寬高及位置等等。