tumblr masonry + infinite scrolling overlapping posts despite using desandro and new jquery

问题

I am new to javascript and stuff and now I have a frustrating issue with masonry and infinite scroll on tumblr. I have read nearly all the forum questions about those issues but nothing solved my problem.

So, I have a tumblr blog (http://jessman5.tumblr.com) and despite of using:

//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
http://masonry.desandro.com/jquery.masonry.min.js
http://masonry.desandro.com/js/jquery.infinitescroll.min.js

and this code:

<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>

the posts are overlapping when it comes to load older posts. Safari is doing it well for a while but Chrome and Firefox are completely lost.

I tried to include this:

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

and this:

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

and (feels like) hundreds of other versions of code... nothing of this is working for me.

I hope anyone can help me. I'm frustrated..

回答1:

When trying to debug code, always check the console for errors. The console states this:

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

I can see that you're trying to initialise masonry on the window.load method, however your infinitescroll code is firing on document ready, which fires before window.load. That's why the error still occurs.

Try initialising both infinitescroll and masonry in the document.ready method, or both in the window.load method, and you should get it to work. Example:

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

    $('#container').infinitescroll({
        // etc
    });
});

回答2:

OKay here is the code which works:

<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>

I just had to flip it, right? haha :D

来源：https://stackoverflow.com/questions/14460370/tumblr-masonry-infinite-scrolling-overlapping-posts-despite-using-desandro-and