title: Using jQuery Masonry IsAnimatedFromBottom
body: <p>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 <a href="http://masonry.desandro.com/demos/infinite-scroll.html" rel="nofollow">this example</a> on the masonry website the new elements appear at the bottom.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;script&gt; 
    $(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 ); 
          });
        }
      );
  
    });
  &lt;/script&gt; 
  </code></pre>
  
  <p>Also looking at the listed <a href="http://masonry.desandro.com/docs/options.html" rel="nofollow">options</a> it doesn't appear to be listed, so does anyone know how this is used?</p>