wordpress中的砌体仅显示一列

所以我知道单列中的砌体已经在堆栈上被覆盖了几次，但我对jquery不是很熟悉，我不确定我需要做出的调整。我也不是非常精通wordpress，不知道我是否在这里犯了一个明显的错误。我正在编辑一个主题，我正在尝试使博客使用砖石布局。 该主题从它自己的 php 文件调用 post 循环，因此博客被分解为几个 php 文件。 我希望我包含正确的信息。

这些帖子以块的形式显示，但它只是直接向下的一列。 似乎容器在每个帖子的页面上一直走过。 我不确定它是否没有停止循环，或者我需要添加什么，以便每个帖子都分布在容器宽度上。 任何关于我做错了什么的帮助或提示将不胜感激。 提前谢谢。

我将其添加到我的函数中。

function wdv_enqueue_scripts() {
   wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );

这是我的页脚.php

<script>
    jQuery( document ).ready( function( $ ) {
        $( '#container2' ).masonry( { columnWidth: 220 } );
    } );
</script>

这是我的循环代码。

<div id="container2">
    <?php
    global $ae_post_factory;
    $ae_post    =   $ae_post_factory->get('post');
    $post = $ae_post->current_post;
?>
<div class="brick">
<div class="brick_header">
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" >
        <h4 class="media-heading title-blog"><?php the_title(); ?></h4>
    </a>
</div>
<div class="brick_featured_image">
   <?php if ( has_post_thumbnail() ) : ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    <?php the_post_thumbnail (); ?>
    </a>
   <?php endif; ?>
</div>
<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="read_more_link">Read More</a>
</div>
</div><!-- container -->

这就是 CSS

* masonry brick layout */
#container2 {
    width: 100%; /* width of the entire container for the wall */
    margin-bottom: 10px;
}
.brick {
    width: 30%; /* width of each brick less the padding inbetween */
    padding: 0px 10px 15px 10px;
    background-color: #fff;
    margin-top: 5px;
}
.brick_header{
    border-bottom: solid 1px #1d1d1d;
    padding-bottom: 10px;
    padding-top: 10px;
}
.brick_header a{
    color: #ffff00;
}
.brick_header a:hover{
    color: white;
}
.brick_featured_image{
    width: 100%;
    margin-top: 10px;
}
.brick_featured_image img{
    width: 100%;
    height: auto;
}