新浪微博有這個功能,剛才思考一下 ,簡單的寫了一下實現方法,程式碼是Js的.

      無可否認,這種方式應該算是web2.0的產物,在使用者體驗上具備很好的感受,除了微博在使用該方式外,另外我還發現有幾個其他性質的網站也在用這種方式,原因是他們的網站頁面比較長,所以使用者在瀏覽的時候隨著滾動條的拖拽而不斷載入新的內容到瀏覽器內,雖然體驗會不錯,但是我感覺這種方式對搜尋引擎的友好性將會降低.歡迎轉載但請註明出處Email:[email protected],Seven的部落格http://hi.baidu.com/see7di

      所以除非不得已我是不會使用這種方式的,就目前來看我的作品內我還沒發現哪個程式需要使用這種方式.

      不過不論如何,創新就是一種進步,難道不是嗎?

下邊的程式碼是直接使用javascript來實現:
window.onscroll = function(){
var water = document.getElementById("water");
water.style.top = (document.documentElement.scrollTop|document.body.scrollTop)+'px';
water.innerHTML = "scrollTop:" + (document.documentElement.scrollTop|document.body.scrollTop) + "<br/>ClientHeight:" + document.documentElement.clientHeight + "<br/>scrollHeight:" + document.documentElement.scrollHeight;

//滾動條在最底端的時候
if (document.documentElement.scrollHeight == (document.documentElement.scrollTop|document.body.scrollTop)+document.documentElement.clientHeight) {
//到最底端去請求新資料
var table=I.$('tag','table')[0];
var start=parseInt(table.rows[table.rows.length-1].cells[0].innerHTML)+1;;
var length=10;
var param='start='+start+'&length='+length;
I.AJAX.post('/test2/DataServlet',param,function(o){
var persons=I.AJAX.json(o.responseText);
//載入新的十行資料
for(var i=0;i<persons.length;i++){
var row=table.insertRow(table.rows.length);
row.insertCell(0).innerHTML=persons[i].id;
row.insertCell(1).innerHTML=persons[i].name;
row.insertCell(2).innerHTML=persons[i].age;
row.insertCell(3).innerHTML=persons[i].hoppy;
}
//刪除前十行資料
for(var i=0;i<10;i++){
table.deleteRow(1);
}
window.scroll(0,parseInt(document.documentElement.scrollTop)-15);//設定滾動條的位置
});
}

//滾動條在最頂端的時候
if((document.documentElement.scrollTop|document.body.scrollTop)==0){

var table=I.$('tag','table')[0];

var e=table.rows[1].cells[0].innerHTML;
if(e!='0'){
var s=parseInt(e)-10<0?0:parseInt(e)-10;
var param='start='+s+'&length=10';
I.AJAX.post('/test2/DataServlet',param,function(o){
var persons=I.AJAX.json(o.responseText);
//載入新的十行資料
for(var i=0;i<persons.length;i++){
var row=table.insertRow(i+1);
row.insertCell(0).innerHTML=persons[i].id;
row.insertCell(1).innerHTML=persons[i].name;
row.insertCell(2).innerHTML=persons[i].age;
row.insertCell(3).innerHTML=persons[i].hoppy;
}
//刪除後十行資料
for(var i=0;i<10;i++){
table.deleteRow(table.rows.length-1);
}
window.scroll(0,15);//設定滾動條的位置
});
}
}

下邊的程式碼是使用Jquery來實現:
//感應滾動條的高度載入新內容
$(window).scroll(function(){
aa=parseInt($(document).height()); //獲取文件的高度
oo=parseInt($(document).scrollTop()); //獲取滾動條到頂部的垂直高度

if((aa-oo)<800){
if(!window.ia){
ia=1;
$.post("sys.php",{work:"hotels",s:('a=c+d 中國e+f&g>h')},function(msg){//用ajax即時獲取伺服器上的資料
if(msg.length>0){
$("#index #tab5 #tab19").last().after(msg);
ia=null;
}else{
$("#index #div2").last().remove();
$("#index #tab5 #tab19").last().after('<span>Error:沒有搜尋到任何結果,請嘗試更換搜尋條件!</span>');
}
});
}
}
});

擴充套件閱讀: