Infinite Scroll Masonry

I had an older version of WordPress that I was dev’ing locally a few months ago and found a fix for Masonry tiles loading on top of one another before sliding into position when using Infinite Scroll here: https://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/

I implemented JS and it worked, but the project was put on hold. Since then i’ve installed the newest version of WP and Jetpack and its no longer working. Notably, the line of JS mentioned ‘var $selector = $(‘#infinite-view-‘ + infinite_count)’, the element is no longer appended/used on the page which I believe is causing the upset.

There has been very limited use cases of these two features being used over the past year that have resolved this problem. I love jetpack but i may have to look into other options.

functions.php:

add_theme_support( 'infinite-scroll', array(
	'container' => 'content',
	'footer' => 'page',
	'wrapper' => false
) );

functions.js:

// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
	$container.masonry({
		itemSelector: '.post',
		columnWidth: '.grid-sizer'
	});
});

// https://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/
// Triggers re-layout on infinite scroll
var infinite_count = 0;
$( document.body ).on( 'post-load', function () {
	infinite_count = infinite_count + 1;
	var $selector = $('#infinite-view-' + infinite_count),
		$elements = $selector.find('.hentry');
	$elements.hide();
	$container.masonry( 'reload' );
	$elements.fadeIn();

	$container.trigger('masonry-items-added');
});

https://www.ads-software.com/plugins/jetpack/