Title: Plugin Breaks Masonry Style
Last modified: November 1, 2016

---

# Plugin Breaks Masonry Style

 *  Resolved [eddyb1988](https://wordpress.org/support/users/eddyb1988/)
 * (@eddyb1988)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/)
 * Hi, the plugin is exactly what i am after, but it breaks my masonry style grid
   completely.
 * My site: [here](http://www.pixeldeck.net)
 * Posts selector/container: .posts
    Post Selector: .post Nav Selector: .archive-
   nav Next selector: .post-nav-older (i put this as when i put .post-nav-newer 
   the load button dissappears)
    -  This topic was modified 9 years, 7 months ago by [eddyb1988](https://wordpress.org/support/users/eddyb1988/).

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [craigramsay](https://wordpress.org/support/users/malinkymedia/)
 * (@malinkymedia)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/#post-8380000)
 * 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.
 *  Thread Starter [eddyb1988](https://wordpress.org/support/users/eddyb1988/)
 * (@eddyb1988)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/#post-8380655)
 * 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 .
 *  Plugin Author [craigramsay](https://wordpress.org/support/users/malinkymedia/)
 * (@malinkymedia)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/#post-8380692)
 * Hi,
 * You’re using masonry not isotope so the code will be different. Try one of these.
 * `$('.posts').masonry();`
    `$('.posts').masonry('reloadItems');`
 * Thanks
 *  Thread Starter [eddyb1988](https://wordpress.org/support/users/eddyb1988/)
 * (@eddyb1988)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/#post-8380896)
 * 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?
 *  Plugin Author [craigramsay](https://wordpress.org/support/users/malinkymedia/)
 * (@malinkymedia)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/#post-8380912)
 * 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.
 * [http://masonry.desandro.com/methods.html](http://masonry.desandro.com/methods.html)
 * [hello@wordpress-ajax-pagination.com](https://wordpress.org/support/topic/plugin-breaks-masonry-style/hello@wordpress-ajax-pagination.com?output_format=md).
 *  [igarciaoliver](https://wordpress.org/support/users/igarciaoliver/)
 * (@igarciaoliver)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/#post-8399334)
 * 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 🙂
 *  Plugin Author [craigramsay](https://wordpress.org/support/users/malinkymedia/)
 * (@malinkymedia)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/#post-8404941)
 * 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.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Plugin Breaks Masonry Style’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/malinky-ajax-pagination_e2c6ba.svg)
 * [Ajax Pagination and Infinite Scroll](https://wordpress.org/plugins/malinky-ajax-pagination/)
 * [Support Threads](https://wordpress.org/support/plugin/malinky-ajax-pagination/)
 * [Active Topics](https://wordpress.org/support/plugin/malinky-ajax-pagination/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/malinky-ajax-pagination/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/malinky-ajax-pagination/reviews/)

 * 7 replies
 * 3 participants
 * Last reply from: [craigramsay](https://wordpress.org/support/users/malinkymedia/)
 * Last activity: [9 years, 7 months ago](https://wordpress.org/support/topic/plugin-breaks-masonry-style/#post-8404941)
 * Status: resolved