Skip to content

Instantly share code, notes, and snippets.

@gregrickaby
Last active June 14, 2023 13:01
Show Gist options
  • Save gregrickaby/10383879 to your computer and use it in GitHub Desktop.
Save gregrickaby/10383879 to your computer and use it in GitHub Desktop.
Infinite Scroll + Masonry + ImagesLoaded
/**
* 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>
/**
* 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;
});
})();
@patrick-wc
Copy link

thanks!

@TyRichards
Copy link

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

@joshuachestang
Copy link

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

@wwweeds
Copy link

wwweeds commented Nov 25, 2015

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...

@jaffa123
Copy link

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

@wwweeds
Copy link

wwweeds commented Nov 30, 2015

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?

@jaffa123
Copy link

jaffa123 commented Dec 2, 2015

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?

@jaffa123
Copy link

jaffa123 commented Dec 3, 2015

Thank you wwweeds, your comments helped me out.

@habout632
Copy link

dude : you are great!

@magoz
Copy link

magoz commented Dec 25, 2015

Amazing! Thank you very much!!

@anthagio
Copy link

anthagio commented Feb 1, 2016

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.

@jolive1993
Copy link

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.

@austinsamsel
Copy link

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

@moafzalmulla
Copy link

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

@fairyly
Copy link

fairyly commented Oct 21, 2016

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

@SayChunKim
Copy link

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

@wingedgirl
Copy link

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

@tiarataylor
Copy link

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

@tookthat
Copy link

tookthat commented Apr 2, 2017

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

@amirkhan81
Copy link

Thank you!

@zenaul
Copy link

zenaul commented May 20, 2017

Thank you........

@blogjw
Copy link

blogjw commented Jul 27, 2017

thank you very much!

@dhruvangg
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment