                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

如何在滑动滚动条时根据数据只加载有限次？

数据有多少就加载多少，数据加完时就不再加载，怎么实现呢？

ryc333

2016-06-03

源自：瀑布流布局 3-2

关注问题我要回答

701

操作

收起

1 回答

言翼
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);}
   }
  });