我們瀏覽有些網頁的時候，當拉動瀏覽器的滾動條時到頁底時，頁面會繼續自動加載更多內容供用戶瀏覽。這種技術我暫且稱它爲滾屏加載技術。我們發現很多網站用到這種技術，必應圖片搜索、新浪微博、QQ空間等將該技術應用得淋漓盡致。
滾屏加載技術，就是使用Javascript監視滾動條的位置，每次當滾動條到達瀏覽器窗口底部時，觸發一個Ajax請求後臺PHP程序，返回相應的數據，並將返回的數據追加到頁面底部，從而實現了動態加載，其實就是一個典型的Ajax應用。本文將使用jQuery，結合PHP，mysql以及JSON，爲您講解如何應用滾屏加載技術到您的項目中去。當然，閱讀本文的前提是您需要有jQuery和PHP相關基礎。
index.php
我們默認要顯示15條數據，因此，我們先從數據庫取開始的15條數據顯示在頁面。後面新加載的數據，我們也按每次15條的方式展示。
爲了講解儘量簡單，我使用原生的PHP和mysql查詢語句。首先，需要連接數據庫，包含連接信息的connnect.php。這裏我定義了幾個用戶id。
然後查詢數據表，獲得結果集，並循環輸出，代碼如下：
<?php
require_once('connect.php');
$user = array('demo1','demo2','demo3','demo3','demo4');
?>
<div id="container">
<?php
$query=mysql_query("select * from say order by id desc limit 0,15");
while ($row=mysql_fetch_array($query)) {
?>
<div class="single_item">
<div class="element_head">
<div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div>
<div class="author"><?php echo $user[$row['userid']];?></div>
</div>
<div class="content"><?php echo $row['content'];?></div>
</div>
<?php } ?>
</div>
<div class="nodata"></div>
注：本例使用的數據來源於本站文章：PHP+Mysql+jQuery實現發佈微博程序--PHP篇，文中有創建數據表的介紹。
jQuery
1、首先，我們要獲取瀏覽器可視區域頁面的高度：
var winH = $(window).height();
2、然後，當滾動頁面的時候需要做的事情是：計算頁面總高度（當滾動底部時，頁面新加載數據，所以頁面總高度是動態變化的），計算滾動條位置（滾動條位置也是隨着加載頁面的高度動態變化的），然後構造一個公式，計算相對比例。
$(window).scroll(function () {
var pageH = $(document.body).height(); //頁面總高度
var scrollT = $(window).scrollTop(); //滾動條top
var aa = (pageH-winH-scrollT)/winH;
});
3、當滾動條接近頁底時，觸發ajax加載，在本例中我們使用jQuery的getJSON方法，向服務端result.php發送請求，請求的參數爲page，即頁數。
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
.....
});
}
4、如果請求響應成功返回JSON數據，則解析JSON數據，並將數據追加到頁面DIV#container後，如果沒有JSON數據返回，則說明數據全部顯示完畢。
if(json){
var str = "";
$.each(json,function(index,array){ //遍歷
var str = "..."; //獲取的JSON數據
$("#container").append(str); //追加
});
i++; //頁數+1
}else{
$(".nodata").show().html("別滾動了，已經到底了。。。");
return false;
}
完整的jQuery代碼如下：
$(function(){
var winH = $(window).height(); //頁面可視區域高度
var i = 1; //設置當前頁數
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滾動條top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
var str = "<div class=\"single_item\"><div class=\"element_head\">";
var str += "<div class=\"date\">"+array['date']+"</div>";
var str += "<div class=\"author\">"+array['author']+"</div>";
var str += "</div><div class=\"content\">"+array['content']+"</div></div>";
$("#container").append(str);
});
i++;
}else{
$(".nodata").show().html("別滾動了，已經到底了。。。");
return false;
}
});
}
});
});
result.php
當滾動到頁面底部時，前端Ajax請求到result.php，該後臺程序將根據請求的數據頁數：page，查詢數據表中對應的記錄，並將記錄集以json的格式輸出返回給前端處理。
require_once('connect.php'); //連接數據庫
$user = array('demo1','demo2','demo3','demo3','demo4');
$page = intval($_GET['page']); //獲取請求的頁數
$start = $page*15;
$query=mysql_query("select * from say order by id desc limit $start,15");
while ($row=mysql_fetch_array($query)) {
$arr[] = array(
'content'=>$row['content'],
'author'=>$user[$row['userid']],
'date'=>date('m-d H:i',$row['addtime'])
);
}
echo json_encode($arr); //轉換爲json數據輸出