Plugin Breaks Masonry Style

Hi, thanks for using the plugin. There are notes on the plugin page that explains how to use with Masonry. This will point you in the right direction. Masonry lays out the items once loaded and therefore you need to relayout the new items once they are loaded with ajax.

Thanks

Isotope / Masonry
If your using an isotope / masonry layout then you’ll need to add a callback in the settings to layout the new posts when they are added. This should be in the following format.

$(‘.grid’).isotope(‘reloadItems’).isotope();

Change the reference to the class name .grid to your own container element.

Hey Malinky,

Cheers for the fast response!

I added that piece of code and replaced .grid with .posts which is the container that surrounds my posts, however, when i press “load more” it still stacks my posts instead of using the masonry layout, thus making it look weird.

Is there anything else I’m missing? I really want to use this plugin as its perfect for my site .

Hi,

You’re using masonry not isotope so the code will be different. Try one of these.

$('.posts').masonry();
$('.posts').masonry('reloadItems');

Thanks

Hey ??

I tried that and still not working, any other ideas?

If you click load more it just stacks the posts ontop of eachother, really strange?

Unfortunately there aren’t other ideas as that is what the issue will be. Logically, as you can see the new posts are being loaded so the plugin is doing it’s job, which is to load posts with ajax. The issue lies in that masonry doesn’t know there are new items on the page to layout.

If you want to email me a login to the site I’ll take a look when I can with some other callbacks. If not take a look through here.

https://masonry.desandro.com/methods.html

[email protected].

hi If I may suggest:
it would be better to use a more complex callback to handle this:

$('#the-grid').imagesLoaded()
	.always( function( instance ) {
	// init Masonry on .always!
	$('#the-grid').isotope('reloadItems').isotope();
	console.log('ajax-isotope ok');
})

Masonry and isotope won’t be able to property calculate needed positions until everything is loaded

Excellent plugin ??

Yes thanks for pointing this out. If your grid items don’t have a fixed height then it’s important to wait for images loaded before laying out the grid. I’ll update the docs on the next release to explain both cases.

Thanks again for the input.