Масонство & amp; несколько запросов WP

Я использую 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'
});
});

0

Решение

Я подозревал это!

Масонство использует ширину первого элемента, если ширина не определена для него, и поскольку первый элемент имеет ширину 66%, предполагалось, что все элементы были этой ширины. Я изменил сценарий, чтобы включить columnWidth и это решило проблему.

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

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]