砌体网格重叠页脚内容

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

Answer 2

您可以使用style="clear:both;"内footer类。这将清除所有上面的代码，那么你的页脚将在所有上面的部分之后开始。