Masonry + Picture Module results in overlap

I have the exact same issue. Masonry bricks are glued together and in some cases overlapping each other. When i adjust the screen size they snap to the correct margins. In my case the Picture module is not installed.

I tried overwriting the views.module with the code from the post mentioned above (https://drupal.org/node/1806628#comment-7399254). For me this had no effect.

I tried to disable other jQuery modules like Lightbox2 and Search Autocomplete but without effect.

Any help is much appreciated.

Here is the link: http://www.laserpentina.nl/categorie/attributen

I have switched to fields instead of teaser display and now it is behaving a bit better. I also had to remove almost all styling for the individual 'brick' wrapper, as soon as i add a padding, margin, border or width, the bricks will act as if they are three times as big as they actually are.

I now only have a background color and all styling is applied to my fields. For fields i cannot use margins as they are not used for the calculation, it will make the bricks glue together again.

Besides not being able to apply styling the only problem i have now is that the last row is sometimes not aligned to the left. It sticks to the middle or right side, as seen on the link i posted in the above message.

If anyone has a clue what is going on then please enlighten me.

- Thomas

I used css to give the element a min-height, this stopped the overlapping for me....

Picture issues

Same here.

I don't have picture installed.
I have twitter bootstrap installed.

I guess it is due to the css max-width on images.
For me it doesn't happened in firefox.

I think that things happened this way:
I resize my window,
browser shrink the last image element of the row if the row is larger than 100%,
masonry calculate the image height of the shrinked image,
masonry dispatches the images in their new position and sizes,
browser readjust the images

If I set in css images to max-width: none; it does the trick.
However in some case it still need to have this css.

In javascript I can bind masonry('reload') method on resize with a small delay. It does the trick but it's really overkill and the animation is laggy.

Hello,

Overlaping items are caused by items that change size after a layout.
You need to initiate Masonry after all images are loaded.

I fix it using Jquery to call my custom mansory galery !

In yout JS Script don't call $(document).ready(function(){ }); but jQuery(window).on('load', function(){ });

I found this solution here : http://stackoverflow.com/questions/18849296/masonry-js-overlapping-items

jQuery(window).on('load', function() {

            $('.my-css-selector-galery').masonry({
            // options
            itemSelector : '.field-item'
            });
        });

It should work with version 3 since it is using imagesloaded library.
Please update and have a try, reopen and assign to version 3 if still having the issue.
Thanks for understanding.