I believe the culprit code is somewhere in here:
// When Jetpack Infinite scroll posts have loaded
$( document.body ).on( 'post-load', function () {
var $container = $('.posts');
$container.masonry( 'reloadItems' );
$blocks.imagesLoaded(function(){
$blocks.masonry({
itemSelector: '.post-container'
});
// Fade blocks in after images are ready (prevents jumping and re-rendering)
$(".post-container").fadeIn();
});
The original implementation seems to bug out when reaching many items (i.e like page 4-5 on my website).
I tried replacing as such:
// When Jetpack Infinite scroll posts have loaded
$( document.body ).on( 'post-load', function () {
var $container = $('.posts');
//Edited:
$container.masonry( 'appended', $container, isAnimatedFromBottom )
$blocks.imagesLoaded(function(){
$blocks.masonry({
itemSelector: '.post-container'
});
// Fade blocks in after images are ready (prevents jumping and re-rendering)
$(".post-container").fadeIn();
});
as per: http://desandro.github.io/masonry/docs/methods.html
But then it only loads one column leaving the other rows untouched..
Tried out changing the on-post-load to change the original $blocks, still no desired effect.
// When Jetpack Infinite scroll posts have loaded
$( document.body ).on( 'post-load', function () {
var $container = $('.posts');
//Edited:
$blocks.masonry( 'appended', $container, isAnimatedFromBottom )
$blocks.imagesLoaded(function(){
$blocks.masonry({
itemSelector: '.post-container'
});
// Fade blocks in after images are ready (prevents jumping and re-rendering)
$(".post-container").fadeIn();
});
