砌体设置不影响 WP 后循环输出答案

【问题标题】：Masonry settings not affecting WP post loop output砌体设置不影响 WP 后循环输出
【发布时间】：2014-11-25 00:29:52
【问题描述】：

我正在开发一个 WP 4.0 主题并尝试实现一个简单的砌体设置。我的意图是从一个类别中获取一定数量的帖子，创建一个循环并让砌体将它们布置在动态网格中。

无论出于何种原因，我在 functions.js 文件中输入的设置（columnWidth 和 gutter）似乎都没有任何效果。所有图像都会加载，但只会在一列中垂直向下。我觉得要么我完全错过了一些东西，要么可能是某个地方的一个小侥幸？

functions.php:

function archive_grid(){
    wp_enqueue_script('masonry');
}
add_action('wp_enqueue_scripts', 'archive_grid');

functions.js：

var container = document.querySelector('#masonry-loop');
    var msnry = new Masonry( container, {
            columnWidth: 300,
            gutter: 30,
            itemSelector: '.archive-container'
            });
    } );

模板.php

<div id="archive-index">
    <div id="masonry-loop">
        <?php
            $args = array(
                        'posts_per_page'   => 6,
                'category_name'    => 'back-issue', 
                'orderby'          => 'post_date',
                'order'            => 'DESC' );

            $archive = get_posts( $args ); 
            foreach ( $archive as $post ) : setup_postdata( $post ); ?>     
            <div class="archive-container">
                <?php the_post_thumbnail(); ?></a>
            </div><!-- Archive Container-->
            <?php
            endforeach; 
            ?>              
    </div><!--/#masonry-loop-->
    <?php
    wp_reset_postdata(); ?> 
</div><!-- #archive-index -->

【问题讨论】：

标签： javascript php wordpress masonry

【解决方案1】：

看起来这可能是您的问题（或至少是部分问题）：

<div class="archive-container">
    <?php the_post_thumbnail(); ?></a>
</div><!-- Archive Container-->

div 中没有打开标记 :) 尝试将其添加进去，看看它是否解决了列问题。

【讨论】：

啊，错过了.. 我只是删除了其他代码的旧位，以使其变得简单，看看我是否能找到一个大的。尝试重新添加 a 但没有任何区别。

【解决方案2】：

我不确定在我的 wordpress 中图像的哪个位置受到了影响。似乎在某处它只是忽略了砌体设置并将图像设置为其他一些我似乎无法弄清楚但在检查器中显示为（img [Attributes Style] {};）的定义高度。我向项目容器添加了一些 css 属性以强制 div 为最大宽度。解决了这个问题。

.archive-container {    
    max-width: 300px;
}
.item img {
    width: auto;
    height: auto;
    max-width: 300px;
}

【讨论】：