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 220px中提供了Column-Width。在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

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

Answer 2

我个人主要使用“js-masonry”类，因为如果你使用的是Bootstrap或Modest 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; ?>

请注意，<div class="js-masonry">不在其中。

Wordpress中的砌体只显示一列

2 个答案: