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

})();

thanks!

After 4 hours of messing with this this worked almost instantly.

Great work! Looks like we're on the same wavelength.

I'm trying to implement this to a woocommerce site, which makes it hard to add classes to the shops page, so I changed the selectors names. Is there any reason why that would stop the scripts from functioning? Having a hard time troubeshooting this...

I just can't get this to work with Wordpress at all. My navigation selector (next links) doesn't have a class on it, could that be what's preventing this from working?

Thanks

jaffa123,

Wordpress loads jquery in compatability mode, so you can't use the $ variable just as it is.
In "my-site-script.js, you need to replace:
(function() {
with:
jQuery(function ($) {

If you can't add a class to your "next link" you can try using the id?

How do I add a loading gif to appear as the new posts are loading?

Sometimes, the loading time is quite long. It almost looks like no more posts are available but then they appear after a good few minutes. Has anyone else encountered this?

Thank you wwweeds, your comments helped me out.

dude : you are great!

Amazing! Thank you very much!!

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.