1

ページに Isotope があり、独立して動作します。ページに InfiniteScroll があり、独立して動作します。InfiniteScroll が新しいアイテムをロードするとき、それらをコンテナーに追加しますが、レイアウトに適切に配置されるのではなく、コンテナーの左側の 1 つの列にすべて表示されます。ここに私の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));
  });

});

Isotope は最初のページの最初の項目を問題なく処理するため、これが CSS または html の問題であるとは信じがたいです。必要な情報をお知らせいただければ、より多くの情報を提供させていただきます。

4

1 に答える 1

4

この同じ問題を経験している他の人にとって、私は自分で答えを見つけることになりました. 私の場合、問題はコンテナーのセレクターにありました。

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

問題は、クラスを持つアイテムが要素.page内に複数存在することです。#wallこのため、Isotope は物をどこに置くかについて正確に混乱していたようです。jQuery セレクターが正しいことを常に二重に確認してください。私にとっては、これで修正されました：

var container = $('#wall > .page');
于 2013-10-12T19:40:52.740 に答える