javascript - jQuery Isotope 和 InfiniteScroll - 附加项目未正确放置在布局中

Question

我在页面上有同位素，它独立工作。我在页面上有 InfiniteScroll，它独立工作。当 InfiniteScroll 加载新项目时，我将它们附加到我的容器中，但它们并没有被正确放置在布局中，而是全部出现在容器左侧下方的一列中。这是我的 JS：

$(function() {

  var container = $('#wall .page');

  container.isotope({
    itemSelector: '.brick'
  });

  container.infinitescroll({
    navSelector: "nav.pagination",
    nextSelector: "nav.pagination a[rel=next]",
    itemSelector: ".brick",
    loading: {
      finishedMsg: 'No more items to load.',
      img: 'http://i.imgur.com/qkKy8.gif'
    }
  }, function (newElements) {
    container.isotope('appended', $(newElements));
  });

});

我很难相信这是一个 CSS 或 html 问题，因为 Isotope 可以毫无问题地处理第一页上的初始项目。如果您可以让我知道您需要看什么，我愿意提供更多信息。

Answer 1

对于遇到同样问题的其他人，我最终自己找到了答案。就我而言，问题出在我的容器的选择器中。

var container = $('#wall .page');

问题是元素.page内部存在多个具有该类的项目。#wall正因为如此，Isotope 显然对把东西放在哪里感到困惑。始终确保您的 jQuery 选择器是正确的。对我来说，这解决了它：

var container = $('#wall > .page');