亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

數據塊重復加載

在滾動時數據塊在重復加載,是不是我寫的哪里不對???

正在回答

2 回答

已解決,在

window.onscroll=function(){
????if(checkScrollSlide()){

這段語句中if里面的函數加個括號就可以了。

0 回復 有任何疑惑可以回復我~
js代碼
window.onload?=?function(){
????waterfall('main','box');
????var?dataInt={"data":[{"src":'24.jpg'},{"src":'25.jpg'},{"src":'26.jpg'},{"src":'27.jpg'},{"src":'28.jpg'},{"src":'29.jpg'},{"src":'30.jpg'},{"src":'31.jpg'},{"src":'32.jpg'},{"src":'33.jpg'},{"src":'34.jpg'}]}
????window.onscroll=function(){
????????if(checkScrollSlide){//如果返回值為真,那么就具備了加載數據塊的條件
????????????var?oParent=document.getElementById('main');
????????????//將數據塊渲染到當前頁面的尾部
????????????for(var?i=0;i<dataInt.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/"+dataInt.data[i].src;
????????????????oPic.appendChild(oImg);
????????????}
????????????waterfall('main','box');
????????}
????}
}

function?waterfall(parent,box){
????//將main下的所有class為box的元素取出來
????var?oParent=document.getElementById(parent);
????var?oBoxs=getByClass(oParent,box);
????//計算整個頁面顯示的列數(頁面寬/box的寬)
????var?oBoxW=oBoxs[0].offsetWidth;
????var?cols=Math.floor(document.documentElement.clientWidth/oBoxW);
????//設置main的寬
????oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0?auto;';
????var?hArr=[];//存儲每一列高度的數組
????for(var?i=0;i<oBoxs.length;i++){
????????if(i<cols){
????????????hArr.push(oBoxs[i].offsetHeight);
????????}else?{
????????????var?minH=Math.min.apply(null,hArr);
????????????var?index=getMinhIndex(hArr,minH);//找到最小高度圖片的索引
????????????oBoxs[i].style.position='absolute';
????????????oBoxs[i].style.top=minH+'px';
????????????//oBoxs[i].style.left=oBoxW*index+'px';
????????????oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
????????????hArr[index]+=oBoxs[i].offsetHeight;
????????}
????}
}

//根據class獲取元素
function?getByClass(parent,clsName){
????var?boxArr?=?new?Array(),//用來存儲獲取到的所有class為box的元素
????????oElements=parent.getElementsByTagName('*');
????for(var?i=0;i<oElements.length;i++){
????????if(oElements[i].className==clsName){
????????????boxArr.push(oElements[i]);
????????}
????}
????return?boxArr;
}

//獲取最小高度圖片的index
function?getMinhIndex(arr,val){
????for(var?i?in?arr){
????????if(arr[i]==val){
????????????return?i;
????????}
????}
}

//檢查是否具備了滾動加載數據塊的條件
function?checkScrollSlide(){
????var?oParent=document.getElementById('main');
????var?oBoxs=getByClass(oParent,'box');
????var?lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
????var?scrollTop=document.body.scrollTop?||?document.documentElement.scrollTop;
????var?height=document.body.clientHeight?||document.documentElement.clientHeight;
????return?(lastBoxH<scrollTop+height)?true:false;
}


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
瀑布流布局
  • 參與學習       97751    人
  • 解答問題       758    個

瀑布流布局是網站比較流行的一種布局方式,教你實現三大方式

進入課程

數據塊重復加載

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號