wordpress 中的砌体只显示一列

Question

所以我知道单列中的砌体已经在堆栈上讨论过几次，但我对 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>

这是我的循环代码。

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

Answer 1

我个人使用“js-masonry”类主要是因为如果你使用的是Bootstrap或Modest Grid等框架，它会保留gutter设置等。

这是一个例子：

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

请注意<div class="js-masonry"> 在while 之外。

Answer 2

在这里，您提供 JS 220 像素的列宽。 在 CSS 中：30%。 这可能会造成问题。

确保您的 HTML 结构如下所示。

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

还有 CSS ：

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

还有 JS。

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

更详细的解释：http://masonry.desandro.com/#getting-started

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