Masonry divs overlapping even after using imagesLoaded

Question

I'm using masonry + imagesLoaded for a fluid container (no infinite scroll) containing divs with multiple images, and the number of columns of divs changes according to the screen size. I'm also using 1 google web font.

my problem is that the imagesLoaded doesn't seem to be working? the divs of my container STILL overlap.

my script (I included the latest jquery, masonry, and imagesLoaded scripts before this block, and the google web font link href near the opening head tag):

$(function() {
        var $posts = $('#posts');
        $posts.imagesLoaded(function(){
            $posts.masonry({
                isFitWidth:true,
                colummnWidth:600,
                itemSelector:'.post',
                isAnimated:true,
                transitionDuration:'.5s'
            });
        });
    });

and the relevant css (it isn't much)

#posts {
    z-index:98;
    position:absolute!important;
    height:auto!important;
    margin:auto;
    left:0;
    right:0;
    top:40%; }

.post {
    float:left;
    position:relative;
    padding:25px;
    width:500px;
    margin:75px 50px 100px; }

Is there something conflicting in my css? I've tried other answers with the same issue as me but my layout still isn't working. Let me know if you need a live example.

Answer 1

please try the example js that David DeSandro posted in the docs.

http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/

I was having the same issue, and I switched my columnWidth to a selector like his, and added the percentPosition and gutter and that fixed my issue.

JS

var $grid = $('.grid').imagesLoaded( function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    gutter: 20,
    columnWidth: '.grid-sizer'
  });
 });