PHP+Ajax局部div滚动加载

浏览:2533 最后更新:2016-04-12 07:00 分类:示例 关键字: 加载 ajax 局部 滚动

根据滚动条距离远程加载数据代码:i = 1; //设置当前页数  
 
$(function() { 
    var totalpage = 6; //总页数,防止超过总页数继续滚动 
    var winH = $(window).height(); //页面可视区域高度  
 
    $("#lists").scroll(function() { 
        if (i < totalpage) { // 当滚动的页数小于总页数的时候,继续加载 
            var pageH = $(document.body).height(); 
            var scrollT = $(window).scrollTop(); //滚动条top  
            var aa = (pageH - winH - scrollT) / winH; 
            if (aa < 0.01) { 
                getJson(i) 
            } 
        } else { //否则显示无数据 
            showEmpty(); 
        } 
    }); 
    getJson(0); //加载第一页 
}); 
function getJson(page) { 
    var msg_list = $('#lists'); 
 
    if (msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60) { 
        $(".nodata").show().html("<img src='http://www.sucaihuo.com/Public/images/loading.gif'/>"); 
        $.getJSON("ajax.php", {page: i}, function(json) { 
            if (json) { 
                var str = ""; 
                $.each(json, function(index, array) { 
                    var str = "<div class='per'>"; 
                    var str = str + "<div class='title'>" + array['id'] + "、" + array['title'] + "</div></div>"; 
                    $("#lists").append(str); 
                }); 
                $(".nodata").hide() 
            } else { 
                showEmpty(); 
            } 
        }); 
        i++; 
    } 

function showEmpty() { 
    $(".nodata").show().html("别滚动了,已经到底了。。。"); 
}
局部div加载演示:http://www.sucaihuo.com/js/783.html
评论( 相关
后面还有条评论,点击查看>>