Masonry Grid overlapping footer content

Question

I have used masonry layout in grid class and grid-items are the column. I am loading masonry on load event like below

$(window).load(function () {
$('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    horizontalOrder: true,
    isAnimated: true,
    animationOptions: {
        duration: 1000,
        easing: 'linear',
        queue: false
    }
});
});

and my HTML is below, I'm loading items via ajax. some times it is load proper and sometimes overlaps my footer content or div. as shown in the below screenshot.

<div class="grid">
    <div class="grid-item">
        <img src="images/grid1.jpg" alt="Banner"></a>
    </div>
</div>

score 5 · Accepted Answer · answered Aug 17 '17 at 05:54

The Masonry is firing before images are fully loaded. You can use imagesLoaded (which is being loaded on your page) to determine when the images are loaded into a container. Then fire off Masonry. Something like:

var $container = $('#masonry-grid');
$container.imagesLoaded(function(){
  runMasonry();
});

score 1 · Answer 2 · answered Aug 12 '18 at 08:55

I just found out an alternative fix: I created a canvas element with the correct sizes instead of only loading and placing the images. This »canvas« is used as a placeholder for ratio calculations. The images sits with position absolute on top.

Caveat: you need to know the image sizes/ratio. In my wordpress case they are embedded in the json call.

It even works in Internet Explorer 11.

score 0 · Answer 3 · answered Feb 27 '19 at 17:00

What fixed the issue for me was just appending the elements in a setTimeout function.

$.ajax({
    url: ajaxURL,
    type: 'post',
    data: {
        page: page,
        action: 'load_more'
    },
    success: function(response) {
        let el = $(response)

        that.data('page', newPage);
        setTimeout(function() {
            $('#masonry').append(el).masonry('appended', el, true);
        }, 1000);

    },
    error: function(response) {
        console.log(response);

    }
});

Masonry Grid overlapping footer content

3 Answers3