load-more-masonry.js

/*
 * Load More for Masonry modification
 *
 * Full post:
 * http://www.billerickson.net/infinite-scroll-in-wordpress/
 *
 */
 
jQuery(function($){

	$('.post-listing').append( '<span class="load-more">Click here to load earlier stories</span>' );
	var button = $('.post-listing .load-more');
	var page = 2;
	var loading = false;

	$('body').on('click', '.load-more', function(){
		if( ! loading ) {
			loading = true;
			var data = {
				action: 'be_ajax_load_more',
				nonce: beloadmore.nonce,
				page: page,
				query: beloadmore.query,
			};
			$.post(beloadmore.url, data, function(res) {
				if( res.success) {
					var $items = res.data;
					var $grid = $( '.post-listing' );
					$grid.append( $items ).each( function() {
						$grid.masonry( 'reloadItems' );
					});
					$grid.masonry( 'layout' );
					// $('.grid-item').animate({ opacity: 1 }); // you may need this
					page = page + 1;
					loading = false;
				} else {
					// console.log(res);
				}
			}).fail(function(xhr, textStatus, e) {
				// console.log(xhr.responseText);
			});
		}
	});
		
});