課程
/前端開發
/JavaScript
/瀑布流布局
數據有多少就加載多少，數據加完時就不再加載，怎么實現呢？
2016-06-03
源自：瀑布流布局 3-2
正在回答
定義一個變量a=0，每增加一個圖片就a++;不用循環函數；部分代碼如下:
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);//定義在函數外的全局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};//是否循環加載數據；???console.log(ind);}???}??});
舉報
瀑布流布局是網站比較流行的一種布局方式，教你實現三大方式
1 回答關于沒有滾動條時圖片加載
2 回答是每滾動一次就加載出圖片嗎？為什么我無論怎么滾動都只加載出一次圖片
2 回答窗口比例縮小時滾動滾動條會有bug
2 回答拖動滾動條，scrollTop數值沒有變化
1 回答滾動條滾不下來
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-06-04
定義一個變量a=0，每增加一個圖片就a++;不用循環函數；部分代碼如下:
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);//定義在函數外的全局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};//是否循環加載數據；
???console.log(ind);}
???}
??});