$.get手指向下滑动无限下拉（加载更多，无限下拉，非常好）-包包树列表页
示例为：http://m.bagtree.com/filter/index/cat_id/4.html
一，$.get(url,[data],[callback], [type])
http://www.jb51.net/article/20358.htm
说明：url为请求地址，data为请求数据的列表(是可选的，也可以将要传的参数写在url里面)，callback为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态，是可选参数。而其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引用只是为了对比说明。
1 $.get("data.php",$("#firstName.val()"),function(data){
2
3 $("#getResponse").html(data); }//返回的data是字符串类型
4
5 );
其中HTML代码为：
<section class="store_list fil_listc"> <ul class="modin_list clearfix" id="listing"> <li> <p class="mod_IMG"><a href="/goods/index/goods_id/19415.html"><img class="lazyload" border="0" alt="野果派对系列2015新款趣味野果印花实用大容量双肩包 深海蓝" src="http://p.bagtree.com/list/170891/170891-06_01.jpg" original="http://p.bagtree.com/list/170891/170891-06_01.jpg" width="60%"></a></p> <p class="mod_title"><a rel="nofollow" href="/goods/index/goods_id/19415.html"> 野果派对系列2015新款趣味野果印花实用大容量双肩包 深海蓝</a></p> <p class="mod_prinfo file_prinfo"><span class="pri_hot"><i>¥</i>199</span> <del>原价:￥279</del></p> </li> ... <li></li> </ul> </section> <div id="J_wall_loading" class="wall_loading tc gray" style="display: none;"><span>加载中...</span></div>
JS代码为：jquery.masory.js
var page = 2; var flag = true; var loading = false; //滚动条滚动到离底部距离50的时候触发 $(window).scroll(function(){ // 当滚动到最底部以上100像素时， 加载新内容 if ($(document).height() - $(this).scrollTop() - $(this).height()<50) { if(loading) { $('#J_wall_loading').html('加载完毕'); $('#J_wall_loading').show(); $('#J_wall_loading').fadeOut(5000); return; } flag= true; $('#J_wall_loading').show(); setTimeout(function() { if(flag) { getList(); page++; } flag= false; },2000); }; });
getList代码为：
function getList() { // parseInt(Math.random()*10); var keywords = '{$keywords}'; $.get(location.href,{page:page,is_ajax:1,keywords:keywords},function(item){ if(!item) { loading = true; return false; } $('#J_wall_loading').hide(); var count =item.length; for (var i=0; i < count; i++ ) { var goodslist=''; goodslist='<li><p class="mod_IMG"><a href="'+item[i].url+'"><img class="lazyload" border="0" alt="'+item[i].goods_name+'" src="'+item[i].goods_thumb+'" original="'+item[i].goods_thumb+'" width="60%"></a>'; if(item[i].show_tips.new_goods) { goodslist+='<span class="new_icon">新品<br />首发</span>'; } else if(item[i].show_tips.cuxiao_goods) { goodslist+='<span class="zhe_icon">商品<br />促销</span>'; } goodslist+='</p><p class="mod_title"><a rel="nofollow" href="'+item[i].url+'"> '+item[i].goods_name+'</a></p><p class="mod_prinfo file_prinfo"><span class="pri_hot"><i>¥</i>'+item[i].shop_price+'</span> <del>原价:'+item[i].org_price+'</del></p></li>'; $('#listing').append(goodslist); } },'json'); };
效果为：
文件路径：
http://m.bagtree.com/filter/index/cat_id/4.html&page=1&is_ajax=1
http://m.bagtree.com/filter/index/cat_id/4.html&page=2&is_ajax=1
...
http://m.bagtree.com/filter/index/cat_id/4.html&page=112&is_ajax=1
第二种方式：
效果图为：
链接地址为：http://cid.chenhua.cc/api/guess/guess_center?token=ce8804f22fe46c8f66b3dd11b41cc2fa
接口为：
http://cid.chenhua.cc/api/guess/guess_center?pagesize=10&currpage=2&totalpage=4&token=ce8804f22fe46c8f66b3dd11b41cc2fa
http://cid.chenhua.cc/api/guess/guess_center?pagesize=10&currpage=3&totalpage=4&token=ce8804f22fe46c8f66b3dd11b41cc2fa
http://cid.chenhua.cc/api/guess/guess_center?pagesize=10&currpage=4&totalpage=4&token=ce8804f22fe46c8f66b3dd11b41cc2fa
HTML代码为：
<div id="guessCenter"> <?php for($i = 0; $i < count($lists); $i++) { ?> <div class="guess_box"> <header class="c-b5b5b5 cl"> <span class="fl"><?=$lists[$i]['type'] == 1 ? '单选竞猜' : '组合竞猜'?></span> <span class="fr"><?=$lists[$i]['ordertime']?></span> </header> <div class="guess_list"> <a href="log_detail?lid=<?=$lists[$i]['lid']?>&token=<?=$token?>" class="glc-result"> <p><?=$lists[$i]['title']?></p> <p><?=$lists[$i]['guess_msg']?></p> <i></i> <?=$lists[$i]['is_win'] == 1 ? '<b></b>' : '' ?> </a> </div> </div> <?php } ?> </div> <?php if($currpage < $totalpage) { ?> <div id="Cetloading" class="Cetloading" totalpage="<?=$totalpage?>" pagesize="<?=$pagesize?>" style="display: block;"><span>加载中,请稍候...</span></div> <?php } ?> <script src="<?=$this->config->item('home_url')?>/static/js/jquery-1.11.3.min.js"></script> <script>seajs.use("js/ci_betguess");</script>
JS代码为：
//竞猜中心加载 if(document.getElementById('Cetloading')){ var currpage=2,flag=true,loading=false; var pagesize=parseInt($('#Cetloading').attr('pagesize')); var totalpage=parseInt($('#Cetloading').attr('totalpage')); $(window).scroll(function(){ if($(document).height()-$(this).scrollTop()-$(this).height() < 200){ if(document.getElementById('Cetloading')){ flag=true; document.getElementById('Cetloading').style.display="block"; setTimeout(function(){ if(flag){ $.ajax({ type:'GET', url:cid_url+'/api/guess/guess_center', data:{pagesize:pagesize,currpage:currpage,totalpage:totalpage,token:token}, dataType:'html', success:function(data){ $('#guessCenter').append($(data).find('.guess_box')); currpage++; if(currpage==totalpage+1){ $('#Cetloading').remove(); } }, error:function(){ showmsg('数据获取失败'); } }); } flag=false; },1000); } } }) }
本地文件来自：\ci-center\static\js\ci_betgues.js
第三种方式：
效果为：
链接为：http://cid.5usport.com/api/version3/show?tid=79005
接口为：
http://cid.5usport.com/api/version3/show?tid=79005&page=2
http://cid.5usport.com/api/version3/show?tid=79005&page=3
HTML代码为:
<div class="colume" id="colume_listid"> <div class="chtwo cl"> <div class="viewhd webox"> <div class="avatar_img"><a href="javascript:avatarBack(88384)"><img src="http://www.5usport.com/uc_server/images/noavatar_small.gif" class="img_noerror"></a></div> <div class="auth_wrap"> <div class="authi_top"><a href="javascript:showReports('rep_199062',199062,79005,88384,235,'老特拉福德神灯');" rel="nofollow" class="look_at">...</a><a href="javascript:void(0);" class="elecnation_dr">老特拉福德神灯</a><span class="lou_dr">6楼</span><a href="javascript:void(0);" class="icon-zans paire_zg" data-url="http://cid.5usport.com/api/misc/like?pid=199062&tid79005&authorid=88384&fid=235&uid=0"><em>79</em></a></div> <div class="authi_p"><span>昨天15:42</span></div> <div class="message">曼联应该不败</div> <div class="reply_cont"><p class="rep_nor">红魔16號小公主：嗯嗯</p><p class="rep_nor">劲爆球球：希望</p></div>
</div>
</div></div> </div> <?php if ( $new_count > 10):?> <div id="J_loading" class="wall_loading" totalpage="<?php echo $maxpage?>" style="display: none;"><span>加载中,请稍候...</span></div> <span style="display:block; height:20px;"></span> <?php endif;?>
JS代码为：
//评论加载更多 if(document.getElementById('J_loading')){ var page=2,flag=true,loading=false,totalpage=parseInt($('#J_loading').attr('totalpage')); $(window).scroll(function(){ if( $(document).height()-$(this).scrollTop()-$(this).height()< 200){ if(document.getElementById('J_loading')){ flag=true; document.getElementById('J_loading').style.display="block"; setTimeout(function(){ if(flag){ getlist(); page++; if(page==totalpage+1){ $('#J_loading').remove(); } } flag=false; },1000); } } }); } function getlist(){ $.ajax({ type:'GET', url:location.href, data:{page:page}, dataType:'json', success:function(data){ $('#J_loading').hide(); var count=data.replylists.length; var arr=data.replylists; for(var i=0;i < count ;i++){ var arrlist='<div class="chtwo cl">'; arrlist+='<div class="viewhd webox">'; arrlist+='<div class="avatar_img"><a href="javascript:avatarBack('+arr[i].authorid+')"><img src="'+arr[i].avatar+'" class="img_noerror">'; if(arr[i].author_vip >0){ arrlist+='<span class="v_icon_vv">v</span>'; } arrlist+='</a></div>'; arrlist+='<div class="auth_wrap">'; arrlist+='<div class="authi_top">'; if(data.member_info.uid > 0){ if(data.member_info.isadmin == 2 || data.ismanager == true){ arrlist+='<a href="javascript:showWindow(\'rep_'+arr[i].pid+'\','+arr[i].pid+','+arr[i].tid+','+arr[i].authorid+','+data.fid+',\''+arr[i].author+'\');" rel="nofollow" class="look_at">...</a>'; }else{ arrlist+='<a href="javascript:showOrdinary(\'rep_'+arr[i].pid+'\','+arr[i].pid+','+arr[i].tid+','+arr[i].authorid+','+data.fid+',\''+arr[i].author+'\');" rel="nofollow" class="look_at">...</a>'; } }else{ arrlist+='<a href="javascript:showReports(\'rep_'+arr[i].pid+'\','+arr[i].pid+','+arr[i].tid+','+arr[i].authorid+','+data.fid+',\''+arr[i].author+'\');" rel="nofollow" class="look_at">...</a>'; } arrlist+='<a href="javascript:void(0);" class="elecnation_dr"'; if(arr[i].author_vip >0){ arrlist+=' style="color:#eb6100"'; } arrlist+='>'+arr[i].author+''; if(arr[i].author_hotfansclub_logo !==''){ arrlist+='<img src="'+arr[i].author_hotfansclub_logo+'" align="middle" style="border-radius: 50%; width: 16px; margin-left: 8px;">'; } arrlist+='</a><span class="lou_dr">'+arr[i].new_position+'楼</span>'; arrlist+='<a href="javascript:void(0);" class="icon-zans paire_zg" data-url="'+cid_url+'/api/misc/like?pid='+arr[i].pid+'&tid'+arr[i].tid+'&authorid='+arr[i].authorid+'&fid='+data.fid+'&uid='+data.member_info.uid+'"><em>'+arr[i].support+'</em></a>'; arrlist+='</div>'; arrlist+='<div class="authi_p"><span>'+arr[i].dateline+'</span></div>'; arrlist+='<div class="message">'+arr[i].message+'</div>'; if(arr[i].reply.length){ var brr=arr[i].reply; var b_count=brr.length; arrlist+='<div class="reply_cont">'; for(var m=0;m < b_count; m++){ arrlist+='<p class="rep_nor">'+brr[m].author+'：'+brr[m].message+'</p>'; } arrlist+='</div>'; } arrlist+='</div></div>'; arrlist+='</div>'; $('#colume_listid').append(arrlist); } }, error:function(){ showmsg('数据获取失败'); } }); }
本地文件来自：ci-center\static\js\ci_indextest.js
浙公网安备 33010602011771号