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

来源:3-2 jQuery实现瀑布流布局的图片加载功能

ryc333

2016-06-03 12:31

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

写回答 关注

1回答

  • 言翼
    2016-06-04 14:48:24

    定义一个变量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);}
       }
      });



瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题