0

I am attempting to use the Masonry plug-in to replicate a 'Pinterst' display. Everything is displaying great in Safari, but things often appear a mess in Chrome and Firefox. I am unsure on how to approach remedying this. Below is the JavaScript used to call the jQuery Masonry plug-in code.

Thanks for the help!

<script>
  $("#container").imagesLoaded(function(){
    $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 240,
        isFitWidth: true
    });
    $("#container").infinitescroll({
        navSelector: "span.page a",            
        nextSelector: "span.next a",    
        itemSelector: '.item'          
      },
      // trigger Masonry as a callback
      function( newElements ) {
        var $newElems = $( newElements );       
        $("#container").imagesLoaded(function(){
          $("#container").masonry( 'appended', $newElems )
        });
      });
  });
</script>
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
Bryon Finke
  • 11
  • 1

1 Answers1

0

You're binding on imagesLoaded in a nested way. This means that you're not binding the second function until after the event has been fired already.

primavera133
  • 1,284
  • 1
  • 15
  • 24