Php 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' );

这是我的footer.php

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

我个人使用“js Massey”类主要是因为如果您使用的是Bootstrap或Misted Grid之类的框架，它将保留边沟设置等

以下是一个例子：

<div class="js-masonry">
<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="dt-6 tl-6 tp-6">
    <article>
        <h2>
            <a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
                <i class="fa <?php echo strtolower(str_replace(" ", "-", get_field('project_type'))); ?>"></i>
                <?php the_title(); ?>
            </a>
        </h2>
        <?php the_excerpt(); ?>
        <div class="download">
            <a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
                View <?php the_title(); ?>
            </a>
        </div>
    </article>
</div>
<?php endwhile; ?>
<?php else: ?>
    <h2>No posts to display</h2>    
<?php endif; ?>

没有要显示的帖子

---

请注意，

在while之外。

这里提供的是js220px中的列宽。 在CSS中：30%。 这可能会产生问题

确保您的HTML结构如下所示

<div id="container2">
   <div class="brick">...</div>
   <div class="brick">...</div>
   <div class="brick">...</div>
</div>

和JS

var $container2 = $('#container2');
$container.masonry({
   itemSelector: '.brick'
});

有关更详细的说明：

---

若要了解有关您遇到的问题的更多详细信息，请提供URL，以便我可以查看它并提供确切的解决方案

嗨@Musik你能给我现场链接吗？所以我能理解谢谢。我认为是冲突导致了这个问题。谢谢乔治的回复。更好的练习。我打算这样重组它。

<div id="container2">
   <div class="brick">...</div>
   <div class="brick">...</div>
   <div class="brick">...</div>
</div>

.container2{
   width:100%;
}
.brick{
   width:25%;  
   /* 
   This should be respective of the columns you want
   Like for 4 columns, 100%/4 = 25%
   */
}

var $container2 = $('#container2');
$container.masonry({
   itemSelector: '.brick'
});