jQuery共面堆叠

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回调。这使得masonry能够准确地确定图像应该放置的位置。