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

【问题标题】：jQuery Isotope and InfiniteScroll - Appended items not being properly placed in the layoutjQuery Isotope 和 InfiniteScroll - 附加项目未正确放置在布局中
【发布时间】：2013-10-12 19:33:22
【问题描述】：

我在页面上有同位素，它可以独立工作。我在页面上有 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 可以毫无问题地处理第一页上的初始项目。如果您可以让我知道您需要看什么，我愿意提供更多信息。

【问题讨论】：

标签： javascript jquery jquery-isotope infinite-scroll

【解决方案1】：

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

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

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

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

【讨论】：