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回调。这允许砌体准确地确定图像的放置位置。

jQuery砌体堆叠

1 个答案: