メーソンリーグリッドのフッタの内容が重複しています

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の内側を使用することができます。上記のすべてのコードをクリアすると、上記のセクションの後にフッターが開始されます。