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

时间:2013-10-12 19:33:22

标签: javascript jquery jquery-isotope infinite-scroll

我在页面上有同位素,它可以独立工作。我在页面上有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在没有问题的情况下处理第一页上的初始项目。如果您能告诉我您需要了解的内容,我愿意提供更多信息。

1 个答案:

答案 0 :(得分:4)

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

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

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

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