砌体网格重叠页脚内容

Question

我在grid课堂上使用过砌体布局,grid-items是专栏.我在加载事件上加载砌体,如下所示

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

我的HTML在下面,我正在通过ajax加载项目.有时它负载正确,有时会重叠我的页脚内容或div.如下面的截图所示.

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

Answer 1

在图像满载之前,砌体正在射击.您可以使用imagesLoaded(正在加载到页面上)来确定何时将图像加载到容器中.然后解雇砌体.就像是:

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