blogger - 像 blogspot 上的 9gag 一样向下滚动时自动加载较旧的帖子

Question

这是我的博客：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 到手卷的任何东西。

希望这足以让车轮为您转动。