課程
/前端開發(fā)
/JavaScript
/瀑布流布局
數(shù)據(jù)有多少就加載多少,數(shù)據(jù)加完時(shí)就不再加載,怎么實(shí)現(xiàn)呢?
2016-06-03
源自:瀑布流布局 3-2
正在回答
定義一個(gè)變量a=0,每增加一個(gè)圖片就a++;不用循環(huán)函數(shù);部分代碼如下:
var ind = 0;?var al = 0;
var dataInt = {"data":[{"src":"image/P_01.jpg"},{"src":"image/P_02.jpg"},{"src":"image/P_03.jpg"},{"src":"image/P_04.jpg"},{"src":"image/P_05.jpg"},{"src":"image/P_06.jpg"}]};
$(window).on('scroll',function(){????if(checkScrollSlide()){???if(ind==dataInt.data.length){????if(al==0){????alert("圖片已加載完畢!");????al=1;}????}else{???var oBox = $("<div>").addClass("box").appendTo($('#main'));???var oPic = $('<div>').addClass("pic").appendTo(oBox);???var oImg = $('<img>').attr('src',dataInt.data[ind].src).appendTo(oPic);???var minH = Math.min.apply(null,arrH);//定義在函數(shù)外的全局arrH[],減少選擇器提高性能;???var minIndex = $.inArray(minH,arrH);???oBox.css({????'position':'absolute','top':minH+'px','left':minIndex*w1+'px'????});???arrH[minIndex]+=oBox.outerHeight();???lastBoxTop = oBox.offset().top;???ind++;???//if(ind==6){ind=0};//是否循環(huán)加載數(shù)據(jù);???console.log(ind);}???}??});
舉報(bào)
瀑布流布局是網(wǎng)站比較流行的一種布局方式,教你實(shí)現(xiàn)三大方式
1 回答關(guān)于沒(méi)有滾動(dòng)條時(shí)圖片加載
2 回答是每滾動(dòng)一次就加載出圖片嗎?為什么我無(wú)論怎么滾動(dòng)都只加載出一次圖片
2 回答窗口比例縮小時(shí)滾動(dòng)滾動(dòng)條會(huì)有bug
2 回答拖動(dòng)滾動(dòng)條,scrollTop數(shù)值沒(méi)有變化
1 回答滾動(dòng)條滾不下來(lái)
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-06-04
定義一個(gè)變量a=0,每增加一個(gè)圖片就a++;不用循環(huán)函數(shù);部分代碼如下:
var ind = 0;
?var al = 0;
var dataInt = {"data":[{"src":"image/P_01.jpg"},{"src":"image/P_02.jpg"},{"src":"image/P_03.jpg"},{"src":"image/P_04.jpg"},{"src":"image/P_05.jpg"},{"src":"image/P_06.jpg"}]};
$(window).on('scroll',function(){
??
??if(checkScrollSlide()){
???if(ind==dataInt.data.length){
????if(al==0){
????alert("圖片已加載完畢!");
????al=1;}
????}else{
???var oBox = $("<div>").addClass("box").appendTo($('#main'));
???var oPic = $('<div>').addClass("pic").appendTo(oBox);
???var oImg = $('<img>').attr('src',dataInt.data[ind].src).appendTo(oPic);
???var minH = Math.min.apply(null,arrH);//定義在函數(shù)外的全局arrH[],減少選擇器提高性能;
???var minIndex = $.inArray(minH,arrH);
???oBox.css({
????'position':'absolute','top':minH+'px','left':minIndex*w1+'px'
????});
???arrH[minIndex]+=oBox.outerHeight();
???lastBoxTop = oBox.offset().top;
???ind++;
???//if(ind==6){ind=0};//是否循環(huán)加載數(shù)據(jù);
???console.log(ind);}
???}
??});