最近有一個項目要做成瀑布流布局，研究了一下，想到兩個方案，一個是使用css的flex，一個是使用masonry。
這里先說一下flex的布局
以下屬性注意使用：
1、column-count 把div中的文本分為多少列 2、column-width 規定列寬 3、column-gap 規定列間隙 4、break-inside: avoid; ←在制作手機站瀑布流時候，會出現圖片錯亂，請使用這個屬性：避免元素內部斷行並產生新列；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布式布局</title> </head> <style> .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; } </style> <body> <div class="waterfall"> <div class="item"> <div class="item-content"> 1.三月到大理賞櫻花不遠不近 </div> </div> <div class="item"> <div class="item-content"> 2.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶，在部隊那些日子被遺忘的花兒春光 </div> </div> <div class="item"> <div class="item-content"> 3.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶 </div> </div> <div class="item"> <div class="item-content"> 4.三月到大理賞櫻花不遠不近 </div> </div> <div class="item"> <div class="item-content"> 5.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶，在部隊那些日子被遺忘的花兒春光 </div> </div> <div class="item"> <div class="item-content"> 6.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶 </div> </div> <div class="item"> <div class="item-content"> 7.三月到大理賞櫻花不遠不近,又近又遠 </div> </div> <div class="item"> <div class="item-content"> 9.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶，在部隊那些日子被遺忘的花兒春光 </div> </div> <div class="item"> <div class="item-content"> 9.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶 </div> </div> </div> </body> </html>
效果如下：
效果還是比較滿意的，但是缺點也非常明顯，我希望的是順序是從左到右排列而不是從上到下排列。
於是想以一個曲線救國的方法：
先上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布式布局</title> </head> <style> .flex_box{ display: flex; flex-direction: row; } .waterfall{ display: flex; flex-direction: column; } .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; } </style> <body> <div class="flex_box"> <div class="waterfall"> <div class="item"> <div class="item-content"> 1.三月到大理賞櫻花不遠不近 </div> </div> <div class="item"> <div class="item-content"> 4.三月到大理賞櫻花不遠不近,三月到大理賞櫻花不遠不近 </div> </div> <div class="item"> <div class="item-content"> 7.三月到大理賞櫻花不遠不近,又近又遠,月到大理賞櫻花不遠不近,又近又遠 </div> </div> </div> <div class="waterfall"> <div class="item"> <div class="item-content"> 2.三月到大理賞櫻花不遠不近 </div> </div> <div class="item"> <div class="item-content"> 5.三月到大理賞櫻花不遠不近,三月到大理賞櫻花不遠不近 </div> </div> <div class="item"> <div class="item-content"> 8.三月到大理賞櫻花不遠不近,又近又遠 </div> </div> </div> <div class="waterfall"> <div class="item"> <div class="item-content"> 3.三月到大理賞櫻花不遠不近,月到大理賞櫻花不遠不近,又近又遠 </div> </div> <div class="item"> <div class="item-content"> 6.三月到大理賞櫻花不遠不近 </div> </div> <div class="item"> <div class="item-content"> 9.三月到大理賞櫻花不遠不近,又近又遠 </div> </div> </div> </div> </body> </html>
效果如下：
其實解決方案也是很簡單，就是最外面是一個flex的盒子，flex-direction設為row，橫向排列，里面的有3個子盒子都是flex盒子並且是flex-direction設為coloum
注意：如果是圖片請設置固定寬度，否則加載的時候會造成每列的寬度不一樣
此方法缺點也是非常明顯，就是加載的時候需要用js控制插入那個子盒子。
另外，就是使用Masonry.js插件
直接使用，先上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布式布局</title> </head> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/masonry/4.2.2/masonry.pkgd.min.js"></script> <style> .waterfall{ } .item1{ width:100px; } .item2{ width:200px; } .item3{ width:300px; } .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; } </style> <body> <div class="waterfall"> <div class="item item1"> <div class="item-content"> 1.三月到大理賞櫻花不遠不近 </div> </div> <div class="item item3"> <div class="item-content"> 2.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶，在部隊那些日子被遺忘的花兒春光 </div> </div> <div class="item item2"> <div class="item-content"> 3.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶 </div> </div> <div class="item item2"> <div class="item-content"> 4.三月到大理賞櫻花不遠不近 </div> </div> <div class="item item2"> <div class="item-content"> 5.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶，在部隊那些日子被遺忘的花兒春光 </div> </div> <div class="item item1"> <div class="item-content"> 6.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶 </div> </div> <div class="item item3"> <div class="item-content"> 7.三月到大理賞櫻花不遠不近,又近又遠 </div> </div> <div class="item item2"> <div class="item-content"> 9.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶，在部隊那些日子被遺忘的花兒春光 </div> </div> <div class="item item3"> <div class="item-content"> 9.三月到大理賞櫻花不遠不近，才是最好的距離余生，請帶上自己的陽光回憶 </div> </div> </div> <script> $('.waterfall').masonry({ itemSelector: '.item', columnWidth: 200 }); </script> </body> </html>
效果如圖：
明顯不能忍，產生這個問題的原因使用columnWidth: 200，設置了固定寬度，當寬度不滿200的時候會出現空白，要解決這個問題
設置固定的寬度，高度自使用就可以了
.item1{
width:100px;
}
.item2{
width:100px;
}
.item3{
width:100px;
}
效果如下：
具體其他參數可參考：https://www.cnblogs.com/cjc917/p/7402026.html