先來欣賞三個瀑布流的網(wǎng)站
什么是瀑布流瞭稼？
瀑布流咽块，又稱瀑布流式布局绘面。
這種布局適合于小數(shù)據(jù)塊，每個數(shù)據(jù)塊內(nèi)容相近且沒有側(cè)重侈沪。通常飒货，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前尾部峭竣。
瀑布流的三種實現(xiàn)方式
固定列寬的多列布局?示例代碼
CSS3多列布局?示例代碼
絕對定位方式 ?示例代碼
固定列寬的多列布局
優(yōu)點
布局簡單，實現(xiàn)容易不用明確知道數(shù)據(jù)塊高度晃虫，當數(shù)據(jù)塊中有圖片時皆撩，就不需要指定圖片高度。
缺點
列數(shù)固定，擴展不易扛吞，當瀏覽器窗口大小變化時呻惕，只能固定的x列，如果要添加一列滥比，很難調(diào)整數(shù)據(jù)塊的排列亚脆；
滾動加載更多數(shù)據(jù)時，還要指定插入到第幾列中盲泛，還是不方便.
CSS3多列布局
優(yōu)點
直接 CSS 定義濒持，最方便了擴展方便，直接往容器里添加內(nèi)容即可
缺點
只有高級瀏覽器中才能使用寺滚；
還有一個缺點柑营，他的數(shù)據(jù)塊排列是從上到下排列到一定高度后，再把剩余元素依次添加到下一列村视，這個本質(zhì)上就不一樣了官套；
鑒于這兩個主要缺點，注定了該方法只能局限于高端瀏覽器蚁孔，而且奶赔，更適合于文字多欄排列。
瀏覽器對column-count屬性的支持情況
絕對定位方式
優(yōu)點
最優(yōu)的一種方案杠氢，方便添加數(shù)據(jù)內(nèi)容站刑，窗口變化，列數(shù)/數(shù)據(jù)塊都會自動調(diào)整修然；
缺點
需要實現(xiàn)知道數(shù)據(jù)塊高度笛钝，如果其中包含圖片，需要知道圖片高度愕宋；
JS 動態(tài)計算數(shù)據(jù)塊位置玻靡，當窗口縮放頻繁，可能會狂耗性能
常用的瀑布流插件
使用方式
jQuery Masonry (MIT Licence)
Wookmark-jQuery (MIT Licence)
Isotope ( GPL v3 License)
相關閱讀
