Question

我在页面上有同位素，它可以独立工作。我在页面上有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');

问题是.page元素中存在多个具有类#wall的项目。正因为如此，Isotope显然对确切放置东西感到困惑。总是要确保你的jQuery选择器是正确的。对我来说，这解决了它：

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

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

1 个答案: