jQuery Masonary Stacking

Question

Я пытаюсь использовать плагин jQuery, который поставляется с WordPress. Я могу заставить изображения «плавать» рядом друг с другом, но они выглядят сложными (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 --> 

Я звоню в JavaScript файлы с WordPress, как так

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 обратного вызова будет выполняться после того, как изображения будут загружены внутри вашего контейнера. Это позволяет каменной кладке точно определять места размещения изображений.