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到手动滚动的任何内容。

希望这是足以让车轮转动你。