解析javascript瀑布流原理實(shí)現(xiàn)圖片滾動(dòng)加載
先科普下瀑布流吧
瀑布流,又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局,視覺表現(xiàn)為參差不齊的多欄布局,隨著頁面滾動(dòng)條向下滾動(dòng),這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest,逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格,像美麗說、淘寶網(wǎng)都有使用。
這是我實(shí)現(xiàn)的一個(gè)效果,就是怎么滾動(dòng)都加載不玩。就跟瀑布一樣流啊流!
這里的實(shí)現(xiàn)方式我們只說Js實(shí)現(xiàn)方法
實(shí)現(xiàn)原理:
對(duì)容器中已有數(shù)據(jù)塊元素進(jìn)行第一次計(jì)算1 容器總寬度 2 列寬度 3 最小列數(shù) ,得到列數(shù)后,用一個(gè)數(shù)組存放盒子所有高度,找出最小高度。之后根據(jù)序列號(hào)更新高度;看著有些拗口,實(shí)現(xiàn)起來就很簡(jiǎn)單了。
對(duì)于滾動(dòng)加載:即滾動(dòng)到哪個(gè)高度后,需要去加載數(shù)據(jù),其實(shí)這個(gè)就是列的最小高度值,這樣當(dāng)前滾動(dòng)值和最小高度值比較一下即可判斷出來,是否要觸發(fā)加載數(shù)據(jù);就是寫一個(gè)函數(shù),用來判斷是否達(dá)到加載圖片條件,如果達(dá)到,就開始加載。比如獲得最后一張圖片的offsetTop,可視區(qū)高度,滾動(dòng)距離,也就是當(dāng)圖片的offsetTop小于可視區(qū)高度和滾動(dòng)距離之和的情況下,此時(shí)就應(yīng)該加載了,不過條件可以隨便定,也可以等滾動(dòng)到圖片的一半時(shí)候在觸發(fā)加載條件,如圖所示:
先上HTML CSS代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waterfall</title> <script src="script.js"></script> <style> * { margin: 0; padding: 0; } body { background: yellow; } #container { } #container .pin { padding-left: 15px; padding-top: 15px; float: left; } #container .div-box { float: left; border: 1px solid #ccc; box-shadow: 0 0 5px #bbb; background: #fff; padding: 12px; border-radius: 9px; } #container .div-box img { width: 300px; } #container .div-box p { text-align: center; font-size: 20px; font-weight: bold; color: red; } </style> <script> </script> </head> <body> <div id="container"> <div class="pin"> <div class="div-box"> <img src="img/1.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/2.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/3.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/4.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/5.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/6.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/7.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/8.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/9.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/10.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/1.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/2.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/3.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/4.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/5.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/6.jpg" alt=""> <p>白超華-博客園</p> </div> </div> </div> </body> </html>
JS代碼,每行都有注釋
window.onload = function(){ var data = { //模擬后臺(tái)數(shù)據(jù) 的一個(gè)JSON格式的文件 "data":[ {"src":"1.jpg"}, {"src":"2.jpg"}, {"src":"3.jpg"}, {"src":"4.jpg"}, {"src":"5.jpg"}, ] }; window.onscroll = function(){ if(checkScroll()){ //判斷是否具備滾動(dòng)加載得條件 var oParent = document.getElementById('container'); for(var i=0; i<data.data.length; i++){ var div1 = document.createElement('div'); //創(chuàng)建div元素 div1.className = 'pin'; //設(shè)置class oParent.appendChild(div1); var div2 = document.createElement('div');//創(chuàng)建div元素 div2.className = 'div-box'; div1.appendChild(div2); var imgs = document.createElement('img');//創(chuàng)建img元素 imgs.style.width = '300px'; imgs.src = 'img/'+data.data[i].src; //設(shè)置讀取路徑 div2.appendChild(imgs); var p = document.createElement('p');//創(chuàng)建p元素 p.innerHTML = '白超華-博客園'; div2.appendChild(p); } waterfall('container','pin'); //--注意 別忘了這句,當(dāng)滾動(dòng)時(shí)候就執(zhí)行 } } waterfall('container','pin'); } function waterfall(parent, box){ var oParent = document.getElementById(parent);//獲取父級(jí)對(duì)象 var aBox = getByClass(oParent,box);//獲取所有class為pin的盒子的集合 var boxWidth = aBox[0].offsetWidth;//獲取一個(gè)盒子的寬 var pageWidth = document.body.clientWidth||document.documentElement.clientWidth;//獲取可視區(qū)寬 var cols = Math.floor(pageWidth/boxWidth);//獲得列數(shù) var arrH = [];//用于存放盒子的高 for(var i=0; i<aBox.length; i++){ if(i<cols){//當(dāng)小于第一列個(gè)數(shù)的時(shí)候 arrH.push(aBox[i].offsetHeight); } else { var minH = Math.min.apply(null,arrH);//得到數(shù)組中盒字的最小高度minH; var index = getMinIndex(arrH,minH); aBox[i].style.position = 'absolute';//設(shè)置絕對(duì)定位 aBox[i].style.top = minH+'px';//設(shè)置top,就是最小高度 aBox[i].style.left = aBox[0].offsetWidth*index+'px';//設(shè)置left,就是一個(gè)盒子的寬*index索引數(shù) arrH[index]+=aBox[i].offsetHeight; //更新新添加盒字后的列高 } } } //通過父級(jí)獲取class function getByClass(parent, classname){ var aClass = parent.getElementsByTagName('*'); var arr = []; for(var i=0; i<aClass.length; i++){ if(aClass[i].className == classname){ arr.push(aClass[i]); } } return arr; } //最小值的索引index function getMinIndex(arr,val){ for( i in arr){ if(arr[i] == val){ return i; } } } // function checkScroll(){ var oParent = document.getElementById('container'); var aBox = getByClass(oParent,'pin'); var lastBoxHeight = aBox[aBox.length-1].offsetTop;// 當(dāng)滾到到這個(gè)距離時(shí)候就開始加載 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容的滾動(dòng)距離 var documentHeight = document.documentElement.clientHeight; //頁面高度 if(lastBoxHeight<scrollTop+documentHeight){ return true; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- js圖片加載效果實(shí)例代碼(延遲加載+瀑布流加載)
- 利用JS實(shí)現(xiàn)簡(jiǎn)單的瀑布流加載圖片效果
- JavaScript實(shí)現(xiàn)瀑布流以及加載效果
- javascript實(shí)現(xiàn)瀑布流動(dòng)態(tài)加載圖片原理
- javascript實(shí)現(xiàn)仿百度圖片的瀑布流加載效果
- JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果
- javascript瀑布流式圖片懶加載實(shí)例解析與優(yōu)化
- javascript瀑布流式圖片懶加載實(shí)例
- javascript實(shí)現(xiàn)瀑布流加載圖片原理
- js實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流
相關(guān)文章
微信小程序?qū)崿F(xiàn)自動(dòng)播放視頻模仿gif動(dòng)圖效果實(shí)例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動(dòng)播放視頻模仿gif動(dòng)圖效果的相關(guān)資料,通過本文介紹的方法可以實(shí)現(xiàn)自動(dòng)播放視頻,視頻無控制條無聲音且自動(dòng)循環(huán)播放,需要的朋友可以參考下2021-07-07JavaScript之DOM插入更新刪除_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之DOM插入更新刪除,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JS實(shí)現(xiàn)的計(jì)數(shù)排序與基數(shù)排序算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的計(jì)數(shù)排序與基數(shù)排序算法,結(jié)合實(shí)例形式簡(jiǎn)單分析了計(jì)數(shù)排序與基數(shù)排序的原理與JS實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12前端項(xiàng)目npm?install?安裝依賴報(bào)錯(cuò)的解決方案(三種問題解決方案)
本文給大家介紹前端項(xiàng)目npm?install?安裝依賴報(bào)錯(cuò)的解決方案(三種問題解決方案),給大家總結(jié)了前端項(xiàng)目安裝依賴,遇到過的問題,每一種問題給大家完美解決方案,感興趣的朋友一起看看吧2023-12-12javascript foreach中如何獲取數(shù)組下標(biāo)/index
這篇文章主要介紹了javascript foreach中如何獲取數(shù)組下標(biāo)/index問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07js中異步函數(shù)async function變同步函數(shù)的簡(jiǎn)單入門
這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡(jiǎn)單入門,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用,結(jié)合實(shí)例形式分析了ES6函數(shù)對(duì)象參數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-04-04