Masonry Grid Overlaps, works fine after resizing browser window.

So this isn't really a patch as much as it is a quick fix. I've noticed this happening intermittently on one of our sites, but just add this to your template.php. Basically just reload Masonry after the window is finished loading. I didn't have much luck with jQuery(document).ready, but feel free to switch it out if you'd like.

function TEMPLATENAME_preprocess_views_view(&$vars) {
// Reload Masonry after window loads.
  if ($vars['view']->plugin_name == 'masonry_views') {
    drupal_add_js('(function($){ $(window).load(function(){$(".masonry").masonry("reload");});})(jQuery);', array('type' => 'inline','scope' => 'footer'));
  }
}

I'm having this problem. My views are behind tabs and when you click a table the masonry is all overlapped, I figured I need to reload masonry when I click on the tab. I tried

function rrtheme_preprocess_views_view(&$vars) {
// Reload Masonry after window loads.
  if ($vars['view']->plugin_name == 'masonry_views') {
    drupal_add_js('(function($){ $("a").click(function(){$(".masonry").masonry("reload");});})(jQuery);', array('type' => 'inline','scope' => 'footer'));
  }
}

But it doesn't' seem to be doing anything, also the script is printed times in the html of my page which is weird.

Does anybody have any advice?

This is definitely still an issue in the latest dev.

This isn't a long term fix for the issues in the module, but I adopted the suggestion in #1 to work in my situation. Rather than adding this into the template.php, I added this into a javascript file into my theme. My issue was related to the masonry not automatically resizing properly when the width of the window was changed, so I changed $(window).load to $(window).resize.

    $(window).resize(function(){
      $(".masonry").masonry("reload");
    });

I tried the code in #1, but putting it in my theme script.js file like advised in #6.

Unfortunately it didn't solve the problem.

1. If the Masonry view is behind a Bootstrap tab on window load it will have the problem (all items overlapped, bad absolute position).
2. If you put the view on the first tab (the one which is shown by default, without having you to click a tab/pill) it will work as expected.

This is fixed in 3.x, except for @kopeboy #7 which is handled here:
#1835286: Masonry Grid broken under quicktabs or Bootstrap tabs

I followed #1 by adding to the template.php file, it still didn't work for me. I got an error message in Chrome console showing that "masonry is not a function"

I even tried changing the code from the Masonry Library web. Someone said that in version 3, "reload" should be "reloadItems" instead.

My setting is listed below:
Masonry API 7.x-3.0-beta1
Masonry Views 7.x-3.0

Using latest Masonry API (the dev version), the issue should be fixed and #1 should not be needed, unless I did not understood the problem.
The point the "masonry is not a function" is probably you are either:
- not masonry properly set (check /admin/reports/status)
- your custom JS running before inclusion of masonry library JS (check out the page source code for ordering)

Dom.

Thanks Dom. I fixed my problem either way around.

If I choose "Load images first", it works fine with the same setting before. I don't know why when I unchecked "Load images first" options, all .masonry-item overlapped each other.

This is my site which I can temporary changed to show how thing overlapped

http://cmhop.finearts.cmu.ac.th/

Thanks everyone. This works really well now.

@manop: this is why this option exists. If Masonry fires before images are loaded, it does not have all data to compute the layout positionning since it does not know image sizes.

I was experiencing mysterious occasional overlap problems with fitwidth on the latest dev version until I set Jquery to 1.10 instead of 1.9.