开始使用 Masonry 进行无限滚动答案

【问题标题】：Get Start Infinite Scroll with Masonry开始使用 Masonry 进行无限滚动
【发布时间】：2017-10-09 06:25:10
【问题描述】：

我是无限滚动的初学者，我从不使用它。我尝试将此代码用于我的网站。当滚动到页面底部到页脚时，我试图获得警报。

我的主要目标是在网页滚动到 Wall div 底部时使用 ajax 和 Infinite Scroll 加载更多包含的 HTML。 <div id="wall"></div>。这个 div 有页面底部和页脚上方。所有的 HTML 内容都应该追加，并且在未来使用 JQuery 追加新的内容。

Java 脚本代码：

   $("#wall").infinitescroll({
    navSelector: "#next:last",
    nextSelector: "#next:last",
    itemSelector: "#content",
    debug: false,
    dataType: 'html',
    maxPage: 4,
    path: function(index) {
      return "index" + index + ".html";
    }

    }, function(newElements, data, url){
        alert("hi");
    });

我尝试使用此代码请求在滚动到底部时发出警报，但它不起作用。

Ajax 代码：

$.post("/php/post.php",
{
    name: "aa",
    city: "bb"
},
function(data, status){
    $("#wall").append(data).masonry().masonry('appended', data, true).masonry("reloadItems").masonry("layout");

});

Ajax 响应数据是 HTML 包含的。

如何使用 Infinite Scroll 进行 JQuery 追加和前置更多 HTML 包含使用 ajax？

当滚动到页面底部或滚动到 Wall div 的底部时，这些 HTML 是否包含加载？

如果你知道 Infinite Scroll with Masonry 的一些教程网站，请告诉我。

【问题讨论】：

您能否发布指向您正在使用的infinitescroll jquery 插件的链接
github.com/infinite-scroll/infinite-scroll

标签： javascript jquery ajax ajaxform

【解决方案1】：

首先，使用debug: true 会揭示您当前设置中存在的任何问题。在不知道您使用的 html 的情况下，很难猜测，但是您的所有选择器是否都存在，即：#next 和 #content？

这是一个有工作示例的小提琴： https://jsfiddle.net/pgh49735/

【讨论】：