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

Question

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

Answer 1

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