MugenFTW
12/9/2015 - 1:28 PM

Infinite Scroll with Masonry imagesloaded, infinitescroll, masonry scripts required

Infinite Scroll with Masonry imagesloaded, infinitescroll, masonry scripts required

	var $container = jQuery('ul.post_holder');

	$container.imagesLoaded( function(){

		$container.masonry({
			itemSelector: '.post_item',
			columnWidth: '.post_item',
			gutter: 20,
			percentPosition: true
		});

		$container.infinitescroll({
				navSelector  : '.pager',    // selector for the paged navigation 
				nextSelector : '.pager a.next.page-numbers',  // selector for the NEXT link (to page 2)
				itemSelector : 'ul.post_holder li.post_item',     // selector for all items you'll retrieve
				loading: {
					finishedMsg: 'No more pages to load.',
					img: 'http://macroscop.psmockup.com/wp-content/themes/macroscop/images/ajax-loader.gif'
				}
			},
			// trigger Masonry as a callback
			function( newElements ) {
				// hide new items while they are loading
				var $newElems = $( newElements ).css({ opacity: 0 });
				// ensure that images load before adding to masonry layout
				$newElems.imagesLoaded(function(){
					// show elems now they're ready
					$newElems.animate({ opacity: 1 });
					$container.masonry( 'appended', $newElems, true ); 
				});
			}
		);

	});