首先實(shí)現(xiàn)滾動(dòng)要借助onscroll事件處理程序。
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的涇縣網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
無窮滾動(dòng)就是滑動(dòng)滾動(dòng)條,實(shí)現(xiàn)數(shù)據(jù)塊的無窮加載。
我們以瀑布流的布局來實(shí)現(xiàn)無窮加載。瀑布流就是一些等寬不等高的數(shù)據(jù)塊布局。在滾動(dòng)條下拉時(shí),它會(huì)進(jìn)行加載。那么問題就是在判斷什么時(shí)候應(yīng)該加載。
我們首先應(yīng)該明白瀑布流布局的特點(diǎn)。它將下一個(gè)圖片總是放在當(dāng)前列數(shù)最低的那一列。所以當(dāng)加載最后一個(gè)藍(lán)色的圖片時(shí),也就無疑是最后一個(gè)圖片了。所以要判斷該圖片加載到什么程度來觸發(fā)滾動(dòng)事件。
圖上灰色的表示頁(yè)面的大小,后面藍(lán)色邊框表示窗口的大小。當(dāng)拖動(dòng)滾動(dòng)條時(shí),灰色部分上移。我們希望頁(yè)面最后一個(gè)圖片(藍(lán)色圖片)加載一半時(shí)觸發(fā)滾動(dòng)事件。那么就要形成參照。
下來寫代碼:
//檢測(cè)是否具備滾動(dòng)條加載數(shù)據(jù)塊的條件 function checkScrollSlide(){ var oparent = document.getElementById('main'); var oBoxs = getByClass(oparent,'box'); var scrollH = document.body.scrollTop || document.documentElement.scrollTop + document.body.clientHeight || document.documentElement.clientHeight; var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2); return (lastBoxH < scrollH )? true : false; }
getClass是根據(jù)類名查找元素集合的自己寫的函數(shù),待會(huì)兒會(huì)附上源碼
我們要進(jìn)行加載的數(shù)據(jù)塊的格式是這樣的.每個(gè)圖片被一個(gè)class= pic的div包裹。最后整體屬于父元素main
<div id = "main"> <div class = "box"> <div class = "pic"> <img src = "images/0.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/1.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/2.jpg"> </div> </div> <div>
首先我們要加載的數(shù)據(jù)塊應(yīng)該是從后臺(tái)傳過來的,在這里我們用json模擬一下就可以:
var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
比如這個(gè)就是后臺(tái)傳過來的數(shù)據(jù)。
上面的函數(shù)返回一個(gè)布爾值,當(dāng)為true時(shí),觸發(fā)滾動(dòng)事件。
window.onscroll = function(){ var oparent = document.getElementById('main'); //當(dāng)滿足加載條件時(shí),就要向頁(yè)面中加載數(shù)據(jù)塊 if(checkScrollSlide){ for(var i = 0; i< DataIn.data.length; i++){ var oBox = document.createElement('div'); oBox.className = 'box'; oparent.appendChild(oBox); var opic = document.createElement('div'); opic.className = 'pic'; oBox.appendChild(opic); var oImg = document.createElement('img'); oImg.src = './images/'+DataIn.data[i].src; opic.appendChild(oImg); } waterFull('main','box'); } } }
附上源碼:
css和html
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <script src = "./jswaterfll.js"></script> <title>瀑布流布局</title> <style type="text/css"> *{ padding: 0px; margin: 0px; } #main{ position: relative; } .box{ /* display: inline-block;*/ padding: 15px 0px 0px 15px; float: left; } .pic{ padding: 10px; border-radius: 5px; border:1px solid #ccc; box-shadow: 0 0 5px #ccc; } .pic img{ width: 165px; height: auto; } </style> </head> <body> <div id = 'main'> <div class = "box"> <div class = "pic"> <img src = "images/3.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/4.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/20.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/21.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/2.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/3.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/4.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/5.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/6.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/7.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/8.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/9.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/10.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/11.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/17.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/18.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/19.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/4.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/5.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/6.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/7.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/8.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/11.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/12.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/13.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/14.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/15.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/16.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/17.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/18.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/19.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/20.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/21.jpg"> </div> </div> </div> </body> </html>
js代碼:
window.onload = function(){ waterFull('main','box'); var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]}; window.onscroll = function(){ var oparent = document.getElementById('main'); if(checkScrollSlide){ for(var i = 0; i< DataIn.data.length; i++){ var oBox = document.createElement('div'); oBox.className = 'box'; oparent.appendChild(oBox); var opic = document.createElement('div'); opic.className = 'pic'; oBox.appendChild(opic); var oImg = document.createElement('img'); oImg.src = './images/'+DataIn.data[i].src; opic.appendChild(oImg); } waterFull('main','box'); } } } function waterFull(parent,children){ var oParent = document.getElementById(parent); //var oBoxs = parent.querySelectorAll(".box"); var oBoxs = getByClass(oParent,children); //計(jì)算整個(gè)頁(yè)面顯示的列數(shù) var oBoxW = oBoxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oBoxW); //設(shè)置main的寬度,并且居中 oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto'; //找出高度最小的圖片,將下一個(gè)圖片放在下面 //定義一個(gè)數(shù)組,存放每一列的高度,初始化存的是第一行的所有列的高度 var arrH = []; for(var i = 0; i< oBoxs.length ; i++){ if(i < cols){ arrH.push(oBoxs[i].offsetHeight); } else{ var minH = Math.min.apply(null,arrH); var minIndex = getMinhIndex(arrH,minH); oBoxs[i].style.position = 'absolute'; oBoxs[i].style.top= minH + 'px'; //oBoxs[i].style.left = minIndex * oBoxW + 'px'; oBoxs[i].style.left = oBoxs[minIndex].offsetLeft+'px'; arrH[minIndex] += oBoxs[i].offsetHeight; } } } function getByClass(parent,className){ var boxArr = new Array();//用來獲取所有class為box的元素 oElement = parent.getElementsByTagName('*'); for (var i = 0; i <oElement.length; i++) { if(oElement[i].className == className){ boxArr.push(oElement[i]); } }; return boxArr; } //獲取當(dāng)前最小值得下標(biāo) function getMinhIndex(array,min){ for(var i in array){ if(array[i] == min) return i; } } //檢測(cè)是否具備滾動(dòng)條加載數(shù)據(jù)塊的條件 function checkScrollSlide(){ var oparent = document.getElementById('main'); var oBoxs = getByClass(oparent,'box'); var scrollH = document.body.scrollTop || document.documentElement.scrollTop + document.body.clientHeight || document.documentElement.clientHeight; var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2); return (lastBoxH < scrollH )? true : false; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
標(biāo)題名稱:JavaScript實(shí)現(xiàn)無窮滾動(dòng)加載數(shù)據(jù)
標(biāo)題路徑:http://muchs.cn/article0/pdgdio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站營(yíng)銷、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、商城網(wǎng)站、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)