PHP+jQuery滚屏加载_Ajax滚屏加载_Ajax

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

查看演示下载资源：0次

手机扫码访问：

下载资源下载积分：150分

　　HTML

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

　　jQuery

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

    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); //加载第一页

　　附上数据库信息：

    CREATE TABLE IF NOT EXISTS `goods` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `title` varchar(100) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=0 ;