我正在使用bootstrap开发一个主题，但我无法按照我的意愿显示我的帖子。
这就是我想要的：
但我最好的结果是，有一个永恒的循环。。。。
为了区分图像的大小，我使用了不同的类，这是我做的代码。。。
<div id="blog">
<div class="container">
<div class="row">
<div class="col-md-12 text-center titulo-blog">
<h3 class="page-h3"><?php the_title(); ?></h3>
</div>
</div>
</div>
<?php while ( have_posts() ): the_post(); ?>
<!-- ================================= BIG - SMALL ==================================== -->
<?php if ( $i % 2 == 0 ): ?>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 imp-blog">
<?php query_posts( array(
\'category_name\' => \'imp\',
) ); ?>
<?php if (have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="hoverzoom img-responsive">
<?php the_post_thumbnail(); ?>
<div class="retina">
<div class="ret-text">
<p class="ret-title"><?php the_title(); ?></p>
<p class="ret-sub"><?php the_subtitle(); ?></p>
</div>
</div>
</div>
</a>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-12 img-blog">
<?php query_posts( array(
\'category_name\' => \'img\',
) ); ?>
<?php if (have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="hoverzoom img-responsive">
<?php the_post_thumbnail(); ?>
<div class="retina">
<div class="ret-text">
<p class="ret-title"><?php the_title(); ?></p>
<p class="ret-sub"><?php the_subtitle(); ?></p>
</div>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div>
</div>
<?php $i ++; ?>
<? else: ?>
<!-- ======================================== SMALL - BIG =====================================-->
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 img-blog ">
<?php query_posts( array(
\'category_name\' => \'img\',
) ); ?>
<?php if (have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="hoverzoom img-responsive">
<?php the_post_thumbnail(); ?>
<div class="retina">
<div class="ret-text">
<p class="ret-title"><?php the_title(); ?></p>
<p class="ret-sub"><?php the_subtitle(); ?></p>
</div>
</div>
</div>
</a>
<?php endif; ?>
</div>
<div class="col-md-4 col-sm-12 imp-blog">
<?php query_posts( array(
\'category_name\' => \'imp\',
) ); ?>
<?php if (have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="hoverzoom img-responsive">
<?php the_post_thumbnail(); ?>
<div class="retina">
<div class="ret-text">
<p class="ret-title"><?php the_title(); ?></p>
<p class="ret-sub"><?php the_subtitle(); ?></p>
</div>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div>
</div>
<?php $i ++; ?>
<?php endif; ?>
<?php endwhile; ?>
请帮帮我我不知道怎么解决
最合适的回答,由SO网友:Industrial Themes 整理而成
您不需要任何插件来完成这一点。事实上，这并不是砌体布局的真正用例，因为图像的高度都是相同的。砌体。js表示不同的立柱高度。您只需要一个计数器来跟踪交替行，每个交替行将小列放在第一位而不是第二位。将计数器设置为0，如下所示：
$i = 0;
然后，在每次发布后，按如下方式增加一个：
$i++;
然后您需要使用mod来检查它是否可以被2整除（替换行）。如果是，请将小列放在第一位，而不是第二位。检查如下：
if($i % 2 == 0) {
//...this is an alternate row...
//...put your markup here...
} else {
//...this is a regular row...
//...put your markup here...
}
从标记的外观来看，您可能需要对其进行修改，使其全部位于一个循环中，才能正常工作。
