只显示一列的wordpress中的砖石

Question

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

这些帖子是以块的形式出现的，但它只是一列直下。似乎容器在每一篇文章上都贯穿整个页面。我不确定它是否没有停止循环，或者我需要添加什么，以便使每个post分布在容器宽度上。任何关于我做错了什么的帮助或建议都将是非常感谢的。提前谢谢。

我把这个加到我的功能里了。

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

在这里，您将在JS220px中提供列宽度。在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，这样我就可以查看它并提供准确的解决方案。

Answer 2

我个人使用的“js-砖石”类，主要是因为如果您使用的是一个框架，如Bootstrap或中等网格，它将保持排水沟设置等。

下面是一个示例：

<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">在时间之外。