砌體網格重疊頁腳內容

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類。這將清除所有上面的代碼，那麼你的頁腳將在所有上面的部分之後開始。