我們浏覽有(yǒu)些(xiē)網頁的時(shí)候，當拉動浏覽器(qì)的滾動條時(shí)到頁底時(shí)，頁面會(huì)繼續自動加載更多(duō)內(nèi)容供用戶浏覽。這種技(jì)術(shù)我暫且稱它為(wèi)滾屏加載技(jì)術(shù)。我們發現很(hěn)多(duō)網站(zhàn)用到這種技(jì)術(shù)，必應圖片搜索、新浪微博、QQ空(kōng)間(jiān)等将該技(jì)術(shù)應用得(de)淋漓盡緻。

滾屏加載技(jì)術(shù)，就是使用Javascript監視(shì)滾動條的位置，每次當滾動條到達浏覽器(qì)窗口底部時(shí)，觸發一個(gè)Ajax請(qǐng)求後台PHP程序，返回相應的數(shù)據，并将返回的數(shù)據追加到頁面底部，從而實現了動态加載，其實就是一個(gè)典型的Ajax應用。本文将使用jQuery，結合PHP，mysql以及JSON，為(wèi)您講解如何應用滾屏加載技(jì)術(shù)到您的項目中去。當然，閱讀本文的前提是您需要有(yǒu)jQuery和(hé)PHP相關基礎。

index.php

我們默認要顯示15條數(shù)據，因此，我們先從數(shù)據庫取開(kāi)始的15條數(shù)據顯示在頁面。後面新加載的數(shù)據，我們也按每次15條的方式展示。

為(wèi)了講解盡量簡單，我使用原生(shēng)的PHP和(hé)mysql查詢語句。首先，需要連接數(shù)據庫，包含連接信息的connnect.php。這裏我定義了幾個(gè)用戶id。

然後查詢數(shù)據表，獲得(de)結果集，并循環輸出，代碼如下：  

jQuery

1、首先，我們要獲取浏覽器(qì)可(kě)視(shì)區(qū)域頁面的高(gāo)度：

  var winH = $(window).height(); 

2、然後，當滾動頁面的時(shí)候需要做(zuò)的事情是：計(jì)算(suàn)頁面總高(gāo)度（當滾動底部時(shí)，頁面新加載數(shù)據，所以頁面總高(gāo)度是動态變化的），計(jì)算(suàn)滾動條位置（滾動條位置也是随着加載頁面的高(gāo)度動态變化的），然後構造一個(gè)公式，計(jì)算(suàn)相對比例。

 
$(window).scroll(function () { 
    var pageH = $(document.body).height(); //頁面總高(gāo)度 
    var scrollT = $(window).scrollTop(); //滾動條top 
    var aa = (pageH-winH-scrollT)/winH;  }); 

3、當滾動條接近頁底時(shí)，觸發ajax加載，在本例中我們使用jQuery的getJSON方法，向服務端result.php發送請(qǐng)求，請(qǐng)求的參數(shù)為(wèi)page，即頁數(shù)。

  if(aa<0.02){ 
    $.getJSON("result.php",{page:i},function(json){ 
        ..... 
    }); 
 } 

4、如果請(qǐng)求響應成功返回JSON數(shù)據，則解析JSON數(shù)據，并将數(shù)據追加到頁面DIV#container後，如果沒有(yǒu)JSON數(shù)據返回，則說明(míng)數(shù)據全部顯示完畢。

  if(json){ 
    var str = ""; 
    $.each(json,function(index,array){ //遍曆 
        var str = "..."; //獲取的JSON數(shù)據 
        $("#container").append(str); //追加 
    }); 
    i++;  //頁數(shù)+1  }else{ 
    $(".nodata").show().html("别滾動了，已經到底了。。。"); 
    return false;  } 

完整的jQuery代碼如下：

 
$(function(){ 
    var winH = $(window).height(); //頁面可(kě)視(shì)區(qū)域高(gāo)度 
    var i = 1; //設置當前頁數(shù) 
    $(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 = ""; 
                        var str += ""+array['date']+""; 
                        var str += ""+array['author']+""; 
                        var str += ""+array['content']+""; 
                        $("#container").append(str); 
                    }); 
                    i++; 
                }else{ 
                    $(".nodata").show().html("别滾動了，已經到底了。。。"); 
                    return false; 
                } 
            }); 
        } 
    });  }); 

result.php

當滾動到頁面底部時(shí)，前端Ajax請(qǐng)求到result.php，該後台程序将根據請(qǐng)求的數(shù)據頁數(shù)：page，查詢數(shù)據表中對應的記錄，并将記錄集以json的格式輸出返回給前端處理(lǐ)。

  require_once('connect.php'); //連接數(shù)據庫 
  $user = array('demo1','demo2','demo3','demo3','demo4');  $page = intval($_GET['page']);  //獲取請(qǐng)求的頁數(shù)  $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);  //轉換為(wèi)json數(shù)據輸出 

好了，本文的介紹到此結束，快去看看效果吧(ba)。