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;//避免在主體框中插入任何中斷（頁面，列或區域）。
}

 

 

 

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