課程
/前端開發(fā)
/JavaScript
/瀑布流布局
怎么才能把圖片下面空白的地方,用圖片給補(bǔ)位了??
2017-05-17
源自:瀑布流布局 2-1
正在回答
根據(jù)拖動(dòng)滾動(dòng)條加載數(shù)據(jù);
window.onload=function(){ waterfall('main','box'); //模擬?從數(shù)據(jù)庫拿到的數(shù)據(jù) var?dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.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?checkScrollSlide(){ ????var?oParent?=?document.getElementById('main'); ????var?oBoxs=getByClass(oParent,'box');//返回所有父元素標(biāo)簽類名為box的數(shù)組 ????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; }
舉報(bào)
瀑布流布局是網(wǎng)站比較流行的一種布局方式,教你實(shí)現(xiàn)三大方式
1 回答瀑布流中的圖片問題
1 回答zepto + 圖片懶加載 + 瀑布流
1 回答怎么寫瀑布流能顯示縮略圖,然后點(diǎn)擊圖片后圖片最大化顯示?
1 回答瀑布流這張頁面加載的圖片問題
2 回答求問:js瀑布流為什么從后臺得到的圖片加上去沒有瀑布流的效果?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-05-18
根據(jù)拖動(dòng)滾動(dòng)條加載數(shù)據(jù);