Question

我使用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'
            });
        });

Answer 1

我已经把它搞砸了！

砌体使用第一个元素的宽度，除非为它定义宽度，并且第一个元素是66％宽度，它假设所有元素都是那个宽度。我将脚本更改为包含columnWidth并解决了问题。

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

砌体和多个WP查询

1 个答案: