1

I am attempting to use the jQuery plugin that comes with WordPress. I can get the images to "float" next to each other but they appear stacked(Image Here) and I am not sure why. Here is my markup

<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 -->

I am calling the javascript files from WordPress like so

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

and finally the jQuery like so

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

I am not getting any errors in the dev tools and it seems like it is somewhat working but not adding the height. Any help would be greatly appreciated.

4

1 回答 1

1

我最近在添加动态内容时遇到了同样的问题。试一试：

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

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

通过以这种方式构建代码，imagesLoaded一旦图像加载到容器中，回调就会被执行。这使得砌体可以准确地确定图像应该放置在哪里。

于 2013-06-19T00:22:40.423 回答