flex布局實現瀑布流排版
阿新 • • 發佈:2018-03-21
get eight wookmark 技術 rec 日子 rect play 困難
網上有很多有關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的簡單瀑布流布局就可以了~
flex布局實現瀑布流排版