瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。

好吧，我承認(rèn)上面是我百度的，為了不誤導(dǎo)小伙伴們，我還是堅持用權(quán)威的。

效果圖

? ? ? 如果你經(jīng)常網(wǎng)上沖浪，這樣參差不齊的多欄布局，是不是很眼熟呢？

? ? ? 當(dāng)滾動條往下拉，觸碰到底部某個節(jié)點時，后續(xù)的小部分圖片內(nèi)容會逐步加載跟進(jìn)，以此類推下去，直到內(nèi)容全部加載完，這樣的布局可以提升用戶體驗，尤其面對移動端的用戶，更加省流量。

? ? ? 現(xiàn)在很多網(wǎng)站都運用了這種格局，類似的有蘑菇街，淘寶啊等等，最經(jīng)典的要數(shù)百度的圖片搜索了，由于內(nèi)容多，感覺永遠(yuǎn)加載不完，看不完；

? ? ?當(dāng)然，實現(xiàn)的方法有很多種，不同語言有不同思路邏輯，這里只講js的

基本樣式

js

思路：當(dāng)BoundingClientRect().bottom 小于或者等于文檔的clientHeight時，觸發(fā)事件，讓后面的圖片逐步加載排列在對應(yīng)最小高度的圖片上。