js滚动分页加载数据

实现理念：

1.判断滚动条到底部触发加载函数

2.请求数据

3.追加数据

html:

<div class="list_flex" id="listrow">

<a href="./index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke.detail&id=1">
    <div class="list_flex_son">
        <img data-original="http://img3.tbcdn.cn/tfscom/i3/710919382/TB25HzOv3RkpuFjy1zeXXc.6FXa_!!710919382.jpg" class="list_flex_son_img">                
        <div class="list_flex_son_title">5条 无痕内裤女冰丝一片式中腰性感纯棉裆女士三角内裤大码薄款夏</div>
        <div class="list_flex_son_row">
            <span class="sfsr_price">￥21.90</span>
            <span class="sfsr_tbprice">淘宝价：24.90元</span>
        </div>
    </div>
</a>

</div>

<!--数据加载提示，默认隐藏-->
<div id="add-more" style="text-align: center;">努力加载中...</div>

js:

//分页加载
$(function(){
var hasMore;
var page = 1; //初始页码
var maxnum = 2;//设置加载次数

var downrange= 100;                //下边界-参考正在加载提示层/px
var $main = $("#showbox");            //主体
var $loaddiv = $("#add-more") ;       //加载提示层
var totalheight = 0; 
var $listrow=$("#listrow");
//ajax-fun
function ajaxLoad(){
var html="";
page=page+1;//每次拉到底部page加1
//console.log(page)
hasMore=false;
$.ajax({
url:"http://wechat.ixunluo.com/weishopcs/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke",
type:"post",
data:{page:page},//请求页数
success:function(res){
var list = eval(res);
//console.log(list.length);
//var list=JSON.parse(res);
if(list.length>0) {
    hasMore=true;
//console.log(JSON.parse(res));
    //追加数据
    for(var i=0;i<list.length;i++) {
        html+="<a href='./index.php?i=3&amp;c=entry&amp;m=ewei_shopv2&amp;do=mobile&amp;r=taobaoke.detail&amp;id="+list[i].id+"'>";
        html+="<div class='list_flex_son'>";
        html+="<img data-original='"+res[i]+"' class='list_flex_son_img' src='"+list[i].thumb+"' style='height: 175.313px;'>";
        html+="<div class='list_flex_son_title'>"+list[i].title+"</div>";
        html+="<div class='list_flex_son_row'>";
        html+="<span class='sfsr_price'>￥"+list[i].marketprice+"</span>";
        html+="<span class='sfsr_tbprice'>淘宝价："+list[i].productprice+"元</span>";
        html+="</div>";
        html+="</div>";
        html+="</a>";
    }
    $listrow.append(html);//数据追加到list
    var imgWidth=$('.list_flex_son_img').width();
    $('.list_flex_son_img').height(imgWidth);
}    
}
})
}

//加载中隐藏显示
$loaddiv.ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
})
ifLoad();
//scroll滚动触发加载事件
function ifLoad(){
hasMore=true;
var w = $(window);
var lastTime = new Date();
window.addEventListener("scroll", function scrollHandler() {
var scrollh = $(document).height();
var bua = navigator.userAgent.toLowerCase();
if (bua.indexOf('iphone') != -1 || bua.indexOf('ios') != -1) {
scrollh = scrollh -140;
} else {
scrollh = scrollh - 80;
}
if(($(document).scrollTop() + w.height()) >= scrollh){
if (new Date()-lastTime <100) {
    return;
}
lastTime = new Date();
if (hasMore) {
    ajaxLoad();
}
}
}, 1000);
}

})