jQuery滚屏加载_Ajax滚屏加载

我们经常会看到拉动滚动条时到页底时，页面会继续加载更多内容。这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。

淘建站为您提供更多_其它特效_Ajax_ajax_加载，在此特别感谢您对我们的支持与厚爱！

HTML

<div class="demo">
  <h2 class="tip">提示：使用滚动或拉动滚动条向下看。</h2>
  <div id="lists"></div> 
  <div class="nodata"></div>
</div>

jQuery

2、然后，当滚动页面的时候需要做的事情是：计算页面总高度（当滚动底部时，页面新加载数据，所以页面总高度是动态变化的），计算滚动条位置（滚动条位置也是随着加载页面的高度动态变化的），然后构造一个公式，计算相对比例。

var totalpage = 6; //总页数，防止超过总页数继续滚动
var winH = $(window).height(); //页面可视区域高度 
$(window).scroll(function() {
    if (i < totalpage) { // 当滚动的页数小于总页数的时候，继续加载
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop(); //滚动条top 
        var rate = (pageH - winH - scrollT) / winH;
        if (rate < 0.01) {
            getJson(i)
        }
    } else { //否则显示无数据
        showEmpty();
    }
});
getJson(0); //加载第一页

3、当滚动条接近页底时，触发ajax加载。getJson 代码如下：

function getJson(page) {
    $(".nodata").show().html("<img src='http://www.sucaiq.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("别滚动了，已经到底了。。。");
}

4、当滚动到页面底部时，前端请求到ajax.php

$page = intval($_GET['page']);  //获取请求的页数 

$pagenum = 12; //每页数量
$start = ($page - 1) * $pagenum;
$query = mysql_query("SELECT * FROM food ORDER BY id ASC LIMIT $start," . $pagenum . "");
$arr = array();
while ($row = mysql_fetch_array($query)) {
    $arr[] = array(
        'id' => $row['id'],
        'title' => $row['title']
    );
}
if ($arr) {
    echo json_encode($arr);  //转换为json数据输出 
}

另外下载压缩包里有jQuery滚屏加载需要的表 “food.sql”，有兴趣的朋友可以在本地试试。我已经测试过了，没有数据重复。