前端 js 瀑布流

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






最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,815評論 1 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,573評論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,257評論 4 61
  • 我突然意識到,也許我就是懷念寫日記的感覺了。 以前小學(xué)起到初中,每天被要求寫一篇日記。養(yǎng)成了習(xí)慣,覺得很痛苦,但是...
    觴詠而歸閱讀 164評論 1 0
  • 不能要求別人做什么,我們只能掌握自己做什么。我們都希望自己是特殊的,不是么? 秋天深了,你好,11月 今天畫個皮卡丘!
    MAX龍叔閱讀 102評論 0 4