廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<script> var str = ''; if(page=="") page=1; var stop=true;//觸發開關,防止多次調用事件 $(window).scroll( function(event){ //當內容滾動到底部時加載新的內容 100當距離最底部100個像素時開始加載. if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) { //if(stop==true){ //stop=false; //var canshu="page/"+page+"; var url = ""; var parm = {'page':page}; page=page+1;//當前要加載的頁碼 //加載提示信息 $("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding…..</div><>"); $.post(url,parm,function(data){ if( data.count == 0 ) { $('.prolist-abtn').html('已全部加載完'); return; } $.each(eval(data), function(data, val) { var url1 = ""; $(".ajaxtips").hide(); str = '<div class="content" id="showdiv">'; str +='<div class="cont clearfix">'; str +='<a href="url"><div class="cont_img fl">'; str +='<img src='+val.imgurl+' alt="" /></div>'; str += '<div class="cont_list fl"><p>'+val.sceneryname+'</p><ul class="cont_list fl">'; str += '<li class="cont_list2"><span>¥</span>'; str +='<strong>'+val.sellerprice+'</strong>起<i>¥'+val.sellerprice+'</i></li>'; str +='</ul></div></a></div></div>'; $("#showdiv").append(str);//把新的內容加載到內容的後面 }); stop=true; },'JSON') } }); </script>
以上代碼是小編給大家分享的jQuery實現下拉加載功能實例代碼,希望對大家有所幫助!