Question

我想知道是否可以以相反的顺序加载infinityScroll响应内容。

现在的方式是你有index.html滚动加载外部page2.html然后page3.html等等。所以当用户想要添加内容时他只是复制pageX.html文件，更改内容并将相应的下一个编号分配给html文件。好又简单吧？但是现在最新的更新，最新鲜的内容，是在页面的底部 - 不是最重要的，因为一个人最喜欢它。

所以我的主意是如果用户更新了

<nav id="page-nav">
<a href="pageX.html"></a>
</nav>

到外部html文件的最高数量，然后让infinityScroll以反向顺序显示所有文件，最后一页是page1.html。

目前它的工作原理如下：
index.html - 按此顺序加载以下文件
page1.html（最旧的）
page2.html
page3.html
page4.html（最新）

但我希望它是这样的：
index.html - 按此顺序加载以下文件
page4.html（最新）
page3.html
page2.html
page1.html（最旧的）
每当有人添加页面时，它就会“落在堆栈顶部”

这对我们所有人来说都非常有用吗？

任何人都可以接受挑战？：）

干杯

实际上'infinityScroll'只读取2号以后的外部文件，但只是为了让我的想法更清晰，我使用序列1-2,3等等。

Answer 1

我猜你想这样做，所以你得到的网址总是指向相同的内容（永久链接），这在某些情况下可以非常方便。例如，您知道文章 foo 位于第5页，然后可以使用page5.html#foo链接到该文章。

您可以通过将函数传递给path选项来实现此目的。但是，您必须事先了解页数，因为这是我们用来计算路径的。

// Amount of pages
var numPages = 45;

// Initialize infiniteScroll plugin
$(selector).infinitescroll({
    path: function (page) {
       // Concatenate the path to a page
       var path = "page";
       // Only add a page number if page is below or equal numPages
       if (page <= numPages) {
           path += (numPages - page);
       }
       // Return path as "page%d.html"
       return path + ".html";
    }
});

如文档中所述，path选项可以是一个URL部分数组（例如["/page/", "/"]），也可以是接受页码并返回URL的函数。

Answer 2

您可以将阅读更多按钮放在页面顶部，制作event listener：

$('.selector').infinitescroll({
    loading: {
        finished: function(){
         //move your newly-added content to the top using $.prepend()
        }
    }
})

Answer 3

我创建了一个示例，其中新元素（您需要添加）将添加到容器元素的顶部。

HTML：

<div id="container" class="container">   
</div>

CSS：

.container {
    border: 1px solid #ccc;
    height: 100px;
    width:500px;
    overflow:auto;
}

JAVASCRIPT / JQUERY

// page count
var count = 0;
var content_to_add_on_top = '<div>Page {count}</div>';


// call this function in every 2 seconds
setInterval(function () {

    // code which you need to call when you wants to add an element to top in container
    var content = content_to_add_on_top;
    content = content.replace(/{count}/g, count);
    var container = $('#container');
    var child_elements = container.children();
    if (child_elements.length === 0) {
        // if child element does not exists
        container.append(content);
    } else {
        // if child exists
        var first_element = child_elements[0];
        $(first_element).prepend(content);
    }
    // increment count
    count++;
}, 2000);

JSFiddle Link

希望它有所帮助。

反向加载infinityScroll响应内容

3 个答案: