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

Question

我在页面上有 Isotope，它可以独立运行。我在页面上有 InifiniteScroll，它独立工作。当 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');

问题是 #wall 元素中存在不止一个类为 .page 的项目。因此，Isotope 显然对把东西放在哪里感到困惑。始终加倍确保您的 jQuery 选择器是正确的。对我来说，这解决了问题:

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