flex佈局實現瀑布流排版

網上有不少有關js（jq）實現瀑布流和有關瀑布流的插件不少，例如：插件（Masonry，Wookmark等等）。按照正常的邏輯思惟，瀑布流的排版（item列表）通常都是 由左到右，上而下排序的結果，單純的css實現這一點有些困難 ，下面分享一款由flex佈局實現的瀑布流效果，雖然效果難以達到有些插件的效果，但也算是簡單實用吧。若是您還對flex不是太瞭解，那您須要先了解一下flex佈局。

實現效果圖：

 

html結構：

<div class="waterfall">
   <div class="item">
      <div class="item-content">
         三月到大理賞櫻花不遠不近
      </div>
   </div>
   <div class="item">
       <div class="item-content"> 三月到大理賞櫻花不遠不近，纔是最好的距離餘生，請帶上本身的陽光回憶，在部隊那些日子被遺忘的花兒春光 </div> </div> <div class="item"> <div class="item-content"> 三月到大理賞櫻花不遠不近，纔是最好的距離餘生，請帶上本身的陽光回憶 </div> </div> </div> 

關於item列表，我添加的比較少，您多添加幾個就能夠了......

 

css樣式：

.waterfall{
　　column-count: 3;
　　column-gap: 0;
}
            
.item{
　　box-sizing: border-box;
　　break-inside: avoid;
　　padding: 10px;
}
.item-content{
　　display: flex;
　　flex-direction: column;
　　justify-content: center;
　　align-items: center;
　　padding: 10px;
　　height: auto;
　　font-size: 20px;
　　color: #686868;
　　box-sizing: border-box;
　　border: 1px solid #ccc;
}

 

這樣flex的簡單瀑布流佈局就能夠了～