JS瀑布流,下拉加载数据

  $(window).scroll(function(){     

      //此方法是在滚动条滚动时发生的函数 

      // 当滚动到最底部以上100像素时,加载新内容 

      var $doc_height,$s_top,$now_height; 
      $doc_height = $(document).height();        //这里是document的整个高度 
      $s_top = $(this).scrollTop();            //当前滚动条离最顶上多少高度 
      $now_height = $(this).height();            //滚动条高度
      if(($doc_height - $s_top - $now_height) < 1) jsonajax();     

  }); 

  //做一个ajax方法来请求不断的获取数据 
  var num = index= 0; 

  function jsonajax(){ 
      num++ 
      $.ajax({ 
          url:'xxxxxxxxxx', //url地址
          type:'POST', 
          data:"xxxxxx", //url参数
          dataType:'json', 
          success:function(json){ 
              var data = json['xxx'];
              //alert(data)
              prevwrap = document.getElementById('loadData');
              var oFragment = document.createDocumentFragment();//创建一个文档碎片,把所有的新结点附加在其上,然后把文档碎片的内容一次性添加到document中,这也就只需要一次页面刷新就可。
              for (var i = 0; i < data.length; i++) {
                     var item = data[i];
                     li = document.createElement('dd');
                     var number = index++;                    
                     li.innerHTML = '<dd ><a href="'+url+'" class="react"><div class="dealcard zixun"><div class="zixun_tu"><img src="'+data[i]["thumb"]+'"  width="90" height="70"  /></div><div class="dealcard-gameszx"><div class="dealcard-zixun single-line">'+data[i]["title"]+'</div><div class="zixun_title">'+get_substring(data[i]["description"])+'<span class="zixun_time">'+(data[i]["inputtime"]).split(" ",1)+'</span></div></div></div></a></dd>';
                     //写入html代码
                     //alert("here==="+li.innerHTML);     
                     oFragment.appendChild(li);//将内容追加到文档碎片里
             }
             if(data.length>0){
             prevwrap.appendChild(oFragment);//将文档碎片追加到当前节点
             }else{
                $("#loadIcon").html('亲,已经是最后一页了')
             }         
          }
      }); 

  }

 

posted @ 2014-12-01 10:57  ItcastZc  阅读(467)  评论(0编辑  收藏  举报