使用模数每隔 x post 交替行和列
Alternate row and column every x post using modulo
我正在尝试使用模数每隔 x post 实现交替行和列。并且如下例是显示结构。所有 post 都在显示,但不是按照 2 和 3 post 的结构。看起来计数器不工作并且模数问题。感谢您的审阅。
例如:
// start for each
// 2 posts
<div class="row">
<div class= "col-md-6"></div>
<div class= "col-md-6"></div>
</div>
// next 3 posts in different row
<div class="row">
<div class= "col-md-4"></div>
<div class= "col-md-4"></div>
<div class= "col-md-4"></div>
</div>
// repeat this structure for all my posts so:
// 2 posts in a row
// 3 posts in a row
// 2 posts in a row
// 3 posts in a row
// ...
// ...
-- end foreach --
这是我的代码。
<div class="wrapper container">
<?php
$count = 0;
foreach(code) {
if(!empty($listing_image_url)){
if ( $count % 5 === 0) : ?>
<div class="row">
<div class="col-md-6 list-column-block">
<ul>
<li>
<a href="<?php echo url($Url); ?>" class="listing__block__image">
<div class="inner">
<?php if(!empty($listing_image_url)){ ?>
<img src="<?php echo $listing_image_url; ?>"/>
<?php } ?>
<div class="caption">
<div class="caption-inner">
<span class="caption-appeared">
<h5><span><?php print $Count; ?> homes</span></h5>
</span>
<span class="caption-des">
<?php print $title; ?></span><!--
--><?php if ( $region ): ?><!--
-->,<span class="caption-location">
<?php print $region; ?>
</span>
<?php endif; ?>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<?php endif;
$count++;
if ($count % 5 === 1) :
endif;
if ( $count % 5 === 2) : ?>
<div class="row">
<div class="col-md-4 list-column-block">
<ul>
<li>
<a href="<?php echo url($Url); ?>" class="listing__block__image">
<div class="inner">
<?php if(!empty($listing_image_url)){ ?>
<img src="<?php echo $listing_image_url; ?>"/>
<?php } ?>
<div class="caption">
<div class="caption-inner">
<span class="caption-appeared">
<h5><span><?php print $Count; ?> homes</span></h5>
</span>
<span class="caption-des">
<?php print $title; ?></span><!--
--><?php if ( $region ): ?><!--
-->,<span class="caption-location">
<?php print $region; ?>
</span>
<?php endif; ?>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<?php endif;
if ($count % 5 === 2 || $count % 5 === 3 || $count % 5 === 4) :
endif; ?>
<?php } } ?>
据我所知,您的代码将在每次迭代时生成一个新行(只有一列)。
要创建您想要的结构,您可以使用临时计数器。我会给你一个快速工作的例子(减少到必要的)。如您所见,我仅使用模运算符来确定我们是奇数行还是偶数行。
希望对您有所帮助。
$posts = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
$count_rows = 1;
$tmp_counter = 1;
$html = "";
foreach ($posts as $post)
{
if ($tmp_counter == 1){
$html .= '<div class="row">'; // create a new row on first run and after counter resets
}
if ( $count_rows % 2 === 1)
{
// even row >> 2 Cols
$html .= '<div class= "col-md-6">'.$post.'</div>'; // I would recommend to use a function to generate the post markup
if ($tmp_counter == 2)
{
$html .= '</div>'; // close the row
$tmp_counter = 0; // reset the temporary counter
$count_rows ++; // increase number of rows
}
}
else
{
// odd row >> 3 Cols
$html .= '<div class= "col-md-4">'.$post.'</div>'; // I would recommend to use a function to generate the post markup
if ($tmp_counter == 3)
{
$html .= '</div>'; // close the row
$tmp_counter = 0; // reset the temporary counter
$count_rows ++; // increase number of rows
}
}
$tmp_counter++;
}
if ($tmp_counter != 1){
$html .= '</div>'; // close the last row
}
echo $html;
我正在尝试使用模数每隔 x post 实现交替行和列。并且如下例是显示结构。所有 post 都在显示,但不是按照 2 和 3 post 的结构。看起来计数器不工作并且模数问题。感谢您的审阅。
例如:
// start for each
// 2 posts
<div class="row">
<div class= "col-md-6"></div>
<div class= "col-md-6"></div>
</div>
// next 3 posts in different row
<div class="row">
<div class= "col-md-4"></div>
<div class= "col-md-4"></div>
<div class= "col-md-4"></div>
</div>
// repeat this structure for all my posts so:
// 2 posts in a row
// 3 posts in a row
// 2 posts in a row
// 3 posts in a row
// ...
// ...
-- end foreach --
这是我的代码。
<div class="wrapper container">
<?php
$count = 0;
foreach(code) {
if(!empty($listing_image_url)){
if ( $count % 5 === 0) : ?>
<div class="row">
<div class="col-md-6 list-column-block">
<ul>
<li>
<a href="<?php echo url($Url); ?>" class="listing__block__image">
<div class="inner">
<?php if(!empty($listing_image_url)){ ?>
<img src="<?php echo $listing_image_url; ?>"/>
<?php } ?>
<div class="caption">
<div class="caption-inner">
<span class="caption-appeared">
<h5><span><?php print $Count; ?> homes</span></h5>
</span>
<span class="caption-des">
<?php print $title; ?></span><!--
--><?php if ( $region ): ?><!--
-->,<span class="caption-location">
<?php print $region; ?>
</span>
<?php endif; ?>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<?php endif;
$count++;
if ($count % 5 === 1) :
endif;
if ( $count % 5 === 2) : ?>
<div class="row">
<div class="col-md-4 list-column-block">
<ul>
<li>
<a href="<?php echo url($Url); ?>" class="listing__block__image">
<div class="inner">
<?php if(!empty($listing_image_url)){ ?>
<img src="<?php echo $listing_image_url; ?>"/>
<?php } ?>
<div class="caption">
<div class="caption-inner">
<span class="caption-appeared">
<h5><span><?php print $Count; ?> homes</span></h5>
</span>
<span class="caption-des">
<?php print $title; ?></span><!--
--><?php if ( $region ): ?><!--
-->,<span class="caption-location">
<?php print $region; ?>
</span>
<?php endif; ?>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<?php endif;
if ($count % 5 === 2 || $count % 5 === 3 || $count % 5 === 4) :
endif; ?>
<?php } } ?>
据我所知,您的代码将在每次迭代时生成一个新行(只有一列)。
要创建您想要的结构,您可以使用临时计数器。我会给你一个快速工作的例子(减少到必要的)。如您所见,我仅使用模运算符来确定我们是奇数行还是偶数行。
希望对您有所帮助。
$posts = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
$count_rows = 1;
$tmp_counter = 1;
$html = "";
foreach ($posts as $post)
{
if ($tmp_counter == 1){
$html .= '<div class="row">'; // create a new row on first run and after counter resets
}
if ( $count_rows % 2 === 1)
{
// even row >> 2 Cols
$html .= '<div class= "col-md-6">'.$post.'</div>'; // I would recommend to use a function to generate the post markup
if ($tmp_counter == 2)
{
$html .= '</div>'; // close the row
$tmp_counter = 0; // reset the temporary counter
$count_rows ++; // increase number of rows
}
}
else
{
// odd row >> 3 Cols
$html .= '<div class= "col-md-4">'.$post.'</div>'; // I would recommend to use a function to generate the post markup
if ($tmp_counter == 3)
{
$html .= '</div>'; // close the row
$tmp_counter = 0; // reset the temporary counter
$count_rows ++; // increase number of rows
}
}
$tmp_counter++;
}
if ($tmp_counter != 1){
$html .= '</div>'; // close the last row
}
echo $html;