Ajarudin Gunga Ajarudin Gunga - 2 years ago 132
CSS Question

Masonry Grid overlapping footer content

I have used masonry layout in

class and
are the column. I am loading masonry on load event like below

$(window).load(function () {
// 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>

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');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download