Masonry/Isotope.js not working correctly

Question

I'm developing an wordpress theme and I'm using Isotope or Masonry for the masonry layout. Also I'm using Visual Composer to insert custom elements that i mapped to Visual Composer. I have a container which has no styles and all these items have a div with a class "overlay" that's absolutely positioned and has 100% width and height. It's purpose is to position the white box ( class "content" ) inside of it. Isotope has been giving me a hard time in a previous wordpress theme.. I have no idea why. Here's the image.

Here's the markup for an item:

<div class="masonry-item">
    <img/>
    <div class="overlay">
        <div class="content">
            <!-- Just some text here
        </div>
    </div>
</div>

ANY suggestions are more than welcome, because I can't seem to get it to work in ANY way. Most of the layout methods just end up overlapping all of the items in the most top left corner of the container. Yes, I've tried using ImagesLoaded.js, and it hasn't made a difference.

Masonry JS:

$(".masonry-grid").isotope({
            itemSelector: '.masonry-item'
        });

.masonry-item CSS:

.masonry-item {
    position: relative;
    margin-bottom: 30px;
}

It would seem that if they ALL have equal width like 50% it will work flawlessly. Like Deepak Thomas noted in the comments. But as soon as i put a random style for each element, like 30, 40, 50, 60, 70% width it starts to break. In some cases it would put elements next to each other, most of the time leaving a gap between them if they are not in the first row, and the other times it would just stack them one on top of another even though the two items can clearly be put side to side and still have room to spare.

EDIT: Tried removing the image. No difference.

Thanks in advance!

Answer 1

try this :

var $post_masonry = $('.masonry-grid');
 $(document).ready(function () {           
if ($post_masonry.length) {

                    $post_masonry.isotope({
                        itemSelector: '.masonry-item',
                        layoutMode: 'masonry',
                        percentPosition: true,
                        masonry: {
                            columnWidth: '.masonry-item'
                        }

                });
        }
 }); 

Recommended to use imagesloaded.pkgd.min.js to apply isotope when images already loaded.

var $post_masonry = $('.masonry-grid');
 $(document).ready(function () {           
if ($post_masonry.length) {
                var $masonry = $post_masonry.imagesLoaded(function() {
                    $masonry.isotope({
                        itemSelector: '.masonry-item',
                        layoutMode: 'masonry',
                        percentPosition: true,
                        masonry: {
                            columnWidth: '.masonry-item'
                        }
                    });
                });
        }
 }); 

if ($post_masonry.length) --> is optional. Usually applied with dynamic ajax.

Answer 2

From the code you shared, it seems masonry does not provide default sizes to its items.

For every masonry-item, give an additional class

Eg:

.half { width: 50% }
.full { width: 100% }
.pad { padding: 15px }

And use this on the items as you find them apt.

Eg:

    <div class="masonry-item half">
    <div class="pad">
    <img src="xyz" />
    <div class="overlay">
        <div class="content">I'm the overlay content</div>
    </div>
    </div>
    </div>

That should solve it.

Answer 3

The problem is that the first masonry item is being taken as the columnWidth option for isotope. So just make sure that the first time is the smallest one of your columns.