在博客上像9gag一样向下滚动时自动加载旧帖子

Question

这是我的博客：http://9gago.blogspot.com/这是一个由博客作者/博客专区组成的博客，我想要这个功能，在这个功能中，你向下滚动它会加载旧的帖子，这样用户就不必在每次到达页面的最后一篇帖子时都点击旧的帖子。这里有一个网站就是这样做的，或者曾经有过这样的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();
    }
});

显然，您需要一些代码来获取post返回的内容，以便通过DOM将数据加载到页面中。我编写这段代码是为了从概念上向您展示需要发生的事情。您的标记将有所不同，您的网格可以是任何东西，从Sencha Ext JS到手工滚动的东西。

希望这足以让你的车轮转动起来。