javascript - jQuery 砌体堆叠

Question

我正在尝试使用 WordPress 附带的 jQuery 插件。我可以让图像彼此“ float ”，但它们看起来堆叠在一起( 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 回调。这使得砌体能够准确地确定图像应该放置的位置。