Question

Currently when I append new items to my masonry container they are added in the top left corner and then fly into position. However, in this example on the masonry website the new elements appear at the bottom.

It says in the demo description that the demo ‘makes use of the IsAnimatedFromBottom flag’, but looking at the code I can’t see it:

<script> 
  $(function(){

    var $container = $('#container');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box',
        columnWidth: 100
      });
    });

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        var $newElems = $( newElements );
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  });
</script> 

Also looking at the listed options it doesn’t appear to be listed, so does anyone know how this is used?

Answer 1

Sorry, always the way, found the answer as soon as I posted! The flag isn’t a config setting, but a parameter for the appended method

.masonry( 'appended', $content, isAnimatedFromBottom)