ampora February 2016

Masonry divs overlapping even after using imagesLoaded

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.

Answers


Kathryn Crawford March 2016

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'
  });
 });

Post Status

Asked in February 2016
Viewed 2,412 times
Voted 5
Answered 1 times

Search




Leave an answer