Infinite Scroll + Masonry + ImagesLoaded

infinite-scroll-masonry-imagesloaded.php

/**
 * Be sure to include library scripts in this order. Can be placed either
 * in the header or footer.
 */
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

my-site-script.js

/**
 * Infinite Scroll + Masonry + ImagesLoaded
 */
(function() {

	// Main content container
	var $container = $('#content');

	// Masonry + ImagesLoaded
	$container.imagesLoaded(function(){
		$container.masonry({
			// selector for entry content
			itemSelector: '.entry-content',
			columnWidth: 200
		});
	});

	// Infinite Scroll
	$container.infinitescroll({

		// selector for the paged navigation (it will be hidden)
		navSelector  : ".navigation",
		// selector for the NEXT link (to page 2)
		nextSelector : ".nav-previous a",
		// selector for all items you'll retrieve
		itemSelector : ".entry-content",

		// finished message
		loading: {
			finishedMsg: 'No more pages to load.'
			}
		},

		// 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 );
			});

	});
	
	/**
	 * OPTIONAL!
	 * Load new pages by clicking a link
	 */

	// Pause Infinite Scroll
	$(window).unbind('.infscr');

	// Resume Infinite Scroll
	$('.nav-previous a').click(function(){
		$container.infinitescroll('retrieve');
		return false;
	});

})();

Thank God for this! I've been looking everywhere for a working version of the manual trigger and this is the only thing I've found that works.

There's one issue, though. Whenever I click the link to load the next pages, it disappears. Is there a way to keep it from disappearing on me until there are no more posts to load? Any help would be greatly appreciated.

I cannot for the life of me get the infinite scroll to work, I have my nav selectors linked but they aren't hidden and nothing happens when I reach the end of the grid.

I'm also having an issue with the optional button disappearing after clicking.

how can this be used with wordpress pagination - can you provide any links or code ?

I don't understand how it loaded? or request?

Works Like Charm. Thanks @gregrickaby !

For those who wished to look for docs what's happening:

1. Masonry appended Method (http://masonry.desandro.com/methods.html)
2. ImageLoaded (which separated in later versions) for allowing (http://masonry.desandro.com/layout.html) for preventing grid overlapping while waiting for unloaded images.
3. Infinitescroll.js by @paulirish (Discontinued project, still usable. Allow load items in multiple paginations http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/)

Cheers

需要将内容或图片存到后台数据库里面，如何实现瀑布流无限加载

The masonry isn't working for me, instead there are gaps between the pics?

Spent hours trawling through tutorials and the like, thoroughly frustrated, only to find this and it worked like a charm. Thank you so much!

Thank you!

Thank you........

thank you very much!

How to add a "Load more" button instead of loading on Scroll.

button: '.view-more-button',
scrollThreshold: false,

Tried to use above option but loading on scroll doesn't stop.