Blogspot上

Question

像9GAG向下滾動時自動加載舊帖子這是我的博客：http://9gago.blogspot.com/這是做出來的bloggger/Blogspot上的我要這個功能，其中你下滾，將加載舊帖子一個博客，所以這並不需要用戶每次到達頁面的最後一個帖子時，點擊舊帖子。這是一個完全符合http://9gag.com/或曾經擁有它的網站。

Answer 1

我有你可能會喜歡一個實現。有幾種方法可以用更多的變體來做到這一點。

首先，你需要存儲的數據的，你在網格中顯示某處的鑰匙。這假定你有一個本質上是順序的密鑰。自動遞增整數將工作。

在網格的標記可能是這個樣子：

<div class="content" id="7">some stuff</div> 
<div class="content" id="8">another row of stuff</div> 
<div class="content" id="9">another row of stuff</div> 

然後，你需要一個函數來顯示「加載」圖標，也將抓住下一批數據。使用網格中最後一個元素的id在服務器端運行一個查詢，該查詢將抓取接下來的20個（或多個你想要的）數據行。

function lastRow() 
{ 
    $('div#lastRowLoader').html('<img src="spinner.gif"/>'); 
    $.post('dataUrl?action=getNextRows&lastId=' + $('.content:last').attr('id'), 
     function(data){ 
      if (data != '') { 
      $('.content:last').after(data);   
      } 
      $('div#lastRowLoader').empty(); 
     }); 
    }; 

然後檢測用戶的最後一個函數向下滾動到頁面的末尾。

$(window).scroll(function(){ 
    if ($(window).scrollTop() == $(document).height() - $(window).height()){ 
     lastRow(); 
    } 
}); 

很明顯，您需要一些代碼來接受您發佈的返回信息，以便通過DOM將數據加載到您的頁面中。我已經編寫了這段代碼，從概念上向您展示了需要發生的事情。您的標記會有所不同，您的網格可能是從Sencha Ext JS到手動滾動的任何內容。

希望這是足以讓車輪轉動你。