jQuery Masonary Stacking

Question

我試圖使用WordPress自帶的jQuery插件。我可以讓圖像相互「浮動」，但它們似乎堆疊（Image Here），我不知道爲什麼。這裏是我的標記

<div id="container-masonry"> 
    <?php //WordPress Loop Starts ?>  

    <div class="brick"> 
     <?php the_post_thumbnail(); ?> 

     <h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3> 
    </div> <!-- END .brick --> 

    <?php //END loop ?> 
</div> <!-- END #container-masonry --> 

我打電話從WordPress的JavaScript文件，像這樣

function mason_script() { 
wp_enqueue_script('jquery-masonry'); 
} 
add_action('wp_enqueue_scripts', 'mason_script'); 

最後jQuery的，像這樣

<script> 
jQuery(document).ready(function($){ 
    $('#container-masonry').masonry({ 
     itemSelector: '.brick', 
     }); 
}); 
</script> 

我沒有收到在開發任何錯誤工具，它似乎有點工作，但沒有增加高度。任何幫助將不勝感激。

Answer 1

我最近在添加動態內容時遇到同樣的問題。這給一個鏡頭：

var $container = $('#container-masonry'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.brick' 
    }); 
}); 

通過構造這樣的代碼，一旦圖像的容器內裝入imagesLoaded回調將被執行。這允許砌體準確地確定圖像應放置的位置。