blogger - 向下滚动时自动加载较旧的帖子，如 blogspot 上的 9gag

Question

这是我的博客:http://9gago.blogspot.com/这是一个由 bloggger/blogspot 制作的博客，我想要这个功能，其中您向下滚动它将加载较旧的帖子，这样用户就不必每次到达页面的最后一篇帖子时都单击较旧的帖子。这是一个完全可以做到这一点的网站 http://9gag.com/或者曾经拥有它。

Answer 1

我有一个您可能会喜欢的实现。有多种方法可以做到这一点，并有更多的变化。

首先，您需要将在网格中显示的数据的键存储在某处。这假设您有一个本质上是连续的 key 。自动递增整数就可以了。

网格中的标记可能如下所示:

<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 到手工卷起的任何内容。

希望这足以让您转动起来。