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到手工制作的东西。

希望这足以让车轮转向你。

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

1 个答案: