砌体和多个 WP 查询答案

【问题标题】：Masonry & multiple WP Queries砌体和多个 WP 查询
【发布时间】：2016-05-26 12:59:37
【问题描述】：

我正在使用 2 个WP_Query 查询来加载我想使用砖石安排的帖子列表。问题是砌体将每个元素都视为太宽而无法容纳空间，并且正在撞到新的线上。

如果我删除其中一个查询，砌体工作正常，但我需要运行 2 个查询来加载不同大小的精选帖子。

我的代码：

<div class="contentgrids">

<?php $q1 = new WP_Query($post1);?>
    <?php if ( $q1->have_posts() ) : while ( $q1->have_posts() ) : $q1->the_post(); ?>
       <div class="content_block col-lg-8 col-md-8 col-sm-8 col-xs-8">
          <a href="<?php the_permalink() ?>">
             <?php if(has_post_thumbnail()) { ?>
             <div class="imager">
                <?php the_post_thumbnail(); ?>
             </div>
             <?php } ?>
             <div class="cont_title">
                <p><?php the_title(); ?></p>
             </div>
             <div class="cont_ex">
             <?php the_excerpt ();?>
             </div>
             <div class="cont_pub">
                <?php the_time('d.m.Y'); ?>
             </div>
          </a>
       </div> 
    <?php endwhile; endif;?> 
<?php $q2 = new WP_Query($post2);?>
    <?php if ( $q2->have_posts() ) : while ( $q2->have_posts() ) : $q2->the_post(); ?>
       <div class="content_block col-lg-4 col-md-4 col-sm-4 col-xs-4" id="thirds">
          <a href="<?php the_permalink() ?>">
             <?php if(has_post_thumbnail()) { ?>
             <div class="imager">
                <?php the_post_thumbnail(); ?>
             </div>
             <?php } ?>
             <div class="cont_title">
                <p><?php the_title(); ?></p>
             </div>
             <div class="cont_ex">
             <?php the_excerpt ();?>
             </div>
             <div class="cont_pub">
                <?php the_time('d.m.Y'); ?>
             </div>
          </a>

       </div> 
    <?php endwhile; endif;?> 
</div>

脚本：

var j$ = jQuery.noConflict();
        j$(window).on("load", function(){
                j$('.contentgrids').masonry({
                    itemSelector: '.content_block'
            });
        });

【问题讨论】：

标签： php jquery wordpress masonry

【解决方案1】：

我已经猜到了！

Masonry 使用第一个元素的宽度，除非为其定义了宽度，并且由于第一个元素是 66% 的宽度，它假定所有元素都是该宽度。我将脚本更改为包含columnWidth，它解决了这个问题。

var j$ = jQuery.noConflict();
        j$(window).on("load", function(){
                j$('.contentgrids').masonry({
                    itemSelector: '.content_block',
                    columnWidth: 1
            });
        });

【讨论】：