Isotope + Wordpress - re-layout after posts load? - php

Question

I am using Isotope with a masonry layout in WordPress, along with ImagesLoaded. Each post is a separate isotope item. All seems to be working well, except when I load something dynamic in the post, like a twitter widget or a embedded video. The initial height of the item is set before the post/widget has loaded. Once it has fully loaded, I need isotope to re-layout again to accommodate the new height.
Is there a way to call the layout function again after all the posts are fully loaded?
Here is my isotope code:
// init isotope
var $container = $('#cards');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer',
isFitWidth: true
}
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
$container.isotope('layout');
});
// infinite scroll
$container.infinitescroll({
navSelector : '.pagination',
nextSelector : '.pagination a',
itemSelector : '.item-scroll',
behavior: "twitter",
loading: {
finishedMsg: 'No more pages to load.'
}
},
function ( newElements ) {
var $newElems = jQuery( newElements ).hide(); // hide to begin with
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.fadeIn(); // fade in when ready
$container.isotope( 'appended', $newElems );
});
}
);
function onLayout() {
$container.infinitescroll('scroll');
}
Thank you for your help!

Answer 1

Try this:
var $container = $('#cards');
$container.imagesLoaded( function() {
// init isotope
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer',
isFitWidth: true
}
});
});
// infinite scroll
$container.infinitescroll({
navSelector : '.pagination',
nextSelector : '.pagination a',
itemSelector : '.item-scroll',
behavior: "twitter",
loading: {
finishedMsg: 'No more pages to load.'
}
},
function ( newElements ) {
var $newElems = jQuery( newElements ).hide(); // hide to begin with
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.fadeIn(); // fade in when ready
$container.isotope( 'appended', $newElems ).isotope('layout');
});
}
);
function onLayout() {
$container.infinitescroll('scroll');
}