一诈豌、瀑布流
瀑布流布局有一個(gè)專(zhuān)業(yè)的英文名稱(chēng)Masonry Layouts水泉。瀑布流布局已經(jīng)有好多年的歷史了爸业，我最早知道這個(gè)名詞的時(shí)候大約是在2012年，當(dāng)時(shí)Pinterest網(wǎng)站的布局就是使用的這種流式布局恐疲，簡(jiǎn)言之像Pinterest網(wǎng)站這樣的布局就稱(chēng)之為瀑布流布局腊满，也有人稱(chēng)之為Pinterest 布局。
瀑布流又稱(chēng)瀑布流式布局培己，是比較流行的一種網(wǎng)站頁(yè)面布局方式碳蛋。即多行等寬元素排列，后面的元素依次添加到其后省咨，等寬不等高肃弟，根據(jù)圖片原比例縮放直至寬度達(dá)到我們的要求，依次按照規(guī)則放入指定位置零蓉。
瀑布流布局的核心是基于一個(gè)網(wǎng)格的布局笤受，而且每行包含的項(xiàng)目列表高度是隨機(jī)的（隨著自己內(nèi)容動(dòng)態(tài)變化高度），同時(shí)每個(gè)項(xiàng)目列表呈堆棧形式排列敌蜂，最為關(guān)鍵的是箩兽，堆棧之間彼此之間沒(méi)有多余的間距差存大。還是上張圖來(lái)看看我們說(shuō)的瀑布流布局是什么樣子章喉。
1汗贫、為什么使用瀑布流
瀑布流布局在我們現(xiàn)在的前端頁(yè)面中經(jīng)常會(huì)用的到身坐，它可以有效的降低頁(yè)面的復(fù)雜度，節(jié)省很多的空間落包，對(duì)于整個(gè)頁(yè)面不需要太多的操作部蛇，只需要下拉就可以瀏覽用戶(hù)需要看到的數(shù)據(jù)；并且咐蝇，在當(dāng)前這個(gè)APP至上的時(shí)代搪花，瀑布流可以提供很好的用戶(hù)體驗(yàn)，通過(guò)結(jié)合下拉刷新嘹害，上拉加載進(jìn)行數(shù)據(jù)的懶加載等操作，對(duì)于用戶(hù)的體驗(yàn)感來(lái)說(shuō)是接近于滿(mǎn)分的吮便！
2笔呀、瀑布流的特點(diǎn)
其實(shí)瀑布流的特點(diǎn)就是參差不齊的排列方式，以及流式布局的擴(kuò)展性髓需，可以通過(guò)界面展示給用戶(hù)多條數(shù)據(jù)许师，并且讓用戶(hù)可以有向下瀏覽的沖動(dòng)。
面向過(guò)程思想實(shí)現(xiàn)：
面向?qū)ο笏枷雽?shí)現(xiàn)：
css代碼：
js代碼：
