Ajarudin Gunga Ajarudin Gunga - 5 months ago 26
CSS Question

Masonry Grid overlapping footer content

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>


enter image description here

Answer Source

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