Question

我正在创建一个博客，我希望在用户滚动到页面底部时加载更多帖子。但是，我不想使用从另一个.html文件中提取内容的jQuery插件。相反，我希望将所有帖子放在一个页面上并限制可见的数量，然后在用户不断向下滚动时再加载一些。

是否有任何插件或片段可以帮助我实现这一目标？

示例：

     <-- Visible to users -->
     <article> Pretend this is a preview for an article on a blog</article>
     <article> Pretend this is a preview for an article on a blog</article>
     <article> Pretend this is a preview for an article on a blog</article>
     <-- End of Page -->

     <-- Infinite Scroll Load (Was Hidden Now Visible) -->
     <article> Pretend this is a preview for an article on a blog</article>
     <article> Pretend this is a preview for an article on a blog</article>
     <article> Pretend this is a preview for an article on a blog</article>
     <-- End of Page -->

然后重复......

任何帮助将不胜感激！

Answer 1

试试这个（模式）

$(function () {
    $("body").css("height", $(document).height() + 1)
        .find("article").each(function (i, el) {
        $(el).not(":nth-last-of-type(n+4)").hide()
            .filter(":nth-of-type(4)").on("click.y", function () {
            $("body").animate({
                scrollTop: "0px"
            }, 1000)
        });
    });
    $(document).on("scroll", {
        "scrolled": false
    }, function (e) {
        if (!e.data.scrolled) {
            var el = $("article:nth-of-type(n+4)");
            $(el).show(1000);
            e.data.scrolled = true;
        };
        if (e.data.scrolled) {
            $(el).on("click", function (e) {
                $(e.target).hide(1000);
            });
        };
        if ($("article:nth-of-type(n+4)").css("display") === "none") {
            e.data.scrolled = false;
        };
        return false
    });
});

jsfiddle http://jsfiddle.net/guest271314/vTKpP/

无外部内容的无限滚动

1 个答案: