瀑布流,又稱瀑布流式布局。是比較流行的一種網(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)最小高度的圖片上。