1

私はjavascriptなどに不慣れで、タンブラーの石積みと無限スクロールにイライラする問題があります。これらの問題に関するフォーラムの質問をほぼすべて読みましたが、問題は解決しませんでした。

だから、私は tumblr ブログ (http://jessman5.tumblr.com) を持っていますが、以下を使用しています:

そしてこのコード：

<script>
$(function(){
var container = $('#container');

    container.infinitescroll({
            navSelector  : '.pagination',    
            nextSelector : '.pagination a',
            itemSelector : '.post',
            loading: {
              finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/6RMhx.gif'
            }
        },
        function( newElements ) {
            var newElems = $( newElements );
            newElems.css({ opacity: 0 });
            newElems.animate({ opacity: 1 });
            container.masonry( 'appended', newElems); 
        }
    );
    container.imagesLoaded(function(){
        container.masonry({
            itemSelector: '.post'
        });
    })
});
</script>

古い投稿を読み込むと、投稿が重複しています。Safari はしばらくの間うまくいっていますが、Chrome と Firefox は完全に失われています。

私はこれを含めようとしました:

$(window).load(function(){
  $('#container').masonry({
    // options...
  });
});

この：

container.imagesLoaded(function () {
        container.masonry({
            columnWidth: function (containerWidth) {
                return containerWidth / 100;
            }
        });
    });

そして（感じて）数百の他のバージョンのコード...これは私にとっては何も機能していません。

誰でも私を助けてくれることを願っています。私はイライラしています..

4

2 に答える 2

3

コードをデバッグしようとするときは、常にコンソールでエラーを確認してください。コンソールには次のように記載されています。

cannot call methods on masonry prior to initialization; attempted to call method 'appended'

メソッドでメイソンリーを初期化しようとしていることがわかりますがwindow.load、infinitescroll コードはドキュメントの準備ができたときに起動しており、これは の前 window.loadに起動します。そのため、エラーは引き続き発生します。

メソッドでinfinitescrollとmasonryのdocument.ready両方、またはメソッドで両方を初期化してみてくださいwindow.load。動作するはずです。例：

$(function() {
    $('#container').masonry({
        // options
    });

    $('#container').infinitescroll({
        // etc
    });
});
于 2013-01-22T14:11:12.457 に答える
2

ここで動作するコードは次のとおりです。

<script type="text/javascript">
$(function(){
var container = $('#container');

container.imagesLoaded( function(){
    container.masonry({
        itemSelector : '.post'
    });
});

container.infinitescroll({
      navSelector  : '.pagination',    
      nextSelector : '.pagination a',
      itemSelector : '.post',
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
          $newElems.animate({ opacity: 1 });
          container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
});
</script>

ひっくり返すしかなかったですよね？ハハ：D

于 2013-01-23T09:45:13.640 に答える