-1

I am in the process of making a wordpress theme that uses jquery-masonry, but for the life of me I can't figure out how to use the append method with isAnimatedFromBottom. Below is the code I am currently using. I am trying to get this to work with jetpack infinite scroll.

Any insight or help is greatly appreciated.

jQuery(document).ready(function($) {
var $container = $('#content');

$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.post',
        isAnimated: true,
        animationOptions: {
            duration: 300,
            easing: 'linear',
            queue: false
        }
    });
});

});

John Quinones
  • 79
  • 1
  • 2
  • 4

1 Answers1

0

if you want the new elements to appear at the bottom rather than appearing the top left corner and then fly into position. you should use isAnimatedFromBottom flag for appended method. e.g.

var isAnimatedFromBottom = true;
.masonry( 'appended', $content, isAnimatedFromBottom );

the below code is a example for infinitescroll..

$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 ); 
    });
  }
);
SivaGao
  • 1
  • 1
  • 1