Php 循环中的自举网格

我正试着做一些像这个图像的东西

我正在使用WordPress和woocommerce，希望展示这样的产品

这是完成这项工作的普通html

我需要能够将其放入一个循环：

<div class="container" style="width: 100%">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Span 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <div>Span 2</div>
      <div>Span 2</div>
      <div>Span 2</div>
    </div>
  </div>
</div>

跨度3
跨度2
跨度2
跨度2

我正在使用bootstrap grid.css

以下是我所做的：

while（$loop->have_posts（））：$loop->the_post（）；
如果（$product\U counter<$product\U counter\U max）{
如果（$grid_counter==0）{？>
post->ID）；？>“/>
那里
因此，这里有一种创建您想要的网格布局的方法。虽然这个答案中不包括细节，但我为您提供的内容应该能够让您充分了解如何设置内部部分，以布局您想要的布局

如果是我…我会设置它，这样随着网格的增加，你可以为第1列和第3列以及第2列和第4列创建不同的布局。但是正如我所说的，这应该为你指明了正确的方向

// Not sure why you are using a counter value when you can 
// set the loop to return whatever you want. But you didn't show your loop
$product_counter_max = 8;
// Set grid counter at 1;
$grid_counter = 1;
$product_counter = 0;

echo '<div class="row">';
if ($loop->have_posts()){
    while ($loop->have_posts()) : $loop->the_post();
        // This next line could be superflous based on earlier comment
        if ($product_counter < $product_counter_max) {
            if ($grid_counter == 1 || $grid_counter == 5 ) {
                echo '<div class="col-3">'; 
            } else {
                // Add an extra wrapper div around the second and fourth column
                if ($grid_counter == 2 || $grid_counter == 6 ) echo '<div class="col-3">';
                    // This is an inner column
                    echo '<div class="col-12">';
            }?>
                    <img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>"/>
                    <?php echo get_the_title();
                    $product = wc_get_product($loop->post->ID);
                    /**reviews**/
                    $average = $product->get_average_rating($loop->post->ID);
                    $review_count = $product->get_review_count($loop->post->ID);

                    if ($average != 0) {
                        for ($x = 0; $x < 5; $x++) {
                            if ($x < $average) {
                                echo '<i class="fa fa-star swatchchecked"></i>';
                            } else {
                                echo '<i class="fa fa-star"></i>';
                            }
                        }//for loop
                    }//end of if
                    else {
                        echo "No Rating Yet";
                    }//end of reviews
                    echo '<p>' . sprintf("%.2f", $product->get_price()) . '</p>';
                    ?>
                </div>
                <?php
                if ($grid_counter == 4 || $grid_counter == 8 ) echo '</div>';
        }       
        $grid_counter++;
        $product_counter++;
        endwhile;
    } else {
    echo __('No products found');
}
wp_reset_postdata();

echo '</div>';

//无法确定为什么要使用计数器值
//将循环设置为返回您想要的任何内容。但是您没有显示循环
$product_counter_max=8；
//将网格计数器设置为1；
$grid_计数器=1；
$product_计数器=0；
回声'；
如果（$loop->have_posts（））{
而（$loop->have_posts（））：$loop->the_post（）；
//根据前面的评论，下一行可能是超级棒
如果（$product\U counter<$product\U counter\U max）{
如果（$grid_counter==1 | |$grid_counter==5）{
回声'；
}否则{
//在第二列和第四列周围添加一个额外的包装div
如果（$grid_counter==2 | |$grid_counter==6）回波“”；
//这是一个内柱
回声'；
}?>
post->ID）；？>“/>
因此，这里有一种创建您想要的网格布局的方法。虽然这个答案中不包括细节，但我为您提供的内容应该能够让您充分了解如何设置内部部分，以布局您想要的布局

如果是我…我会设置它，这样随着网格的增加，你可以为第1列和第3列以及第2列和第4列创建不同的布局。但是正如我所说的，这应该为你指明了正确的方向

// Not sure why you are using a counter value when you can 
// set the loop to return whatever you want. But you didn't show your loop
$product_counter_max = 8;
// Set grid counter at 1;
$grid_counter = 1;
$product_counter = 0;

echo '<div class="row">';
if ($loop->have_posts()){
    while ($loop->have_posts()) : $loop->the_post();
        // This next line could be superflous based on earlier comment
        if ($product_counter < $product_counter_max) {
            if ($grid_counter == 1 || $grid_counter == 5 ) {
                echo '<div class="col-3">'; 
            } else {
                // Add an extra wrapper div around the second and fourth column
                if ($grid_counter == 2 || $grid_counter == 6 ) echo '<div class="col-3">';
                    // This is an inner column
                    echo '<div class="col-12">';
            }?>
                    <img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>"/>
                    <?php echo get_the_title();
                    $product = wc_get_product($loop->post->ID);
                    /**reviews**/
                    $average = $product->get_average_rating($loop->post->ID);
                    $review_count = $product->get_review_count($loop->post->ID);

                    if ($average != 0) {
                        for ($x = 0; $x < 5; $x++) {
                            if ($x < $average) {
                                echo '<i class="fa fa-star swatchchecked"></i>';
                            } else {
                                echo '<i class="fa fa-star"></i>';
                            }
                        }//for loop
                    }//end of if
                    else {
                        echo "No Rating Yet";
                    }//end of reviews
                    echo '<p>' . sprintf("%.2f", $product->get_price()) . '</p>';
                    ?>
                </div>
                <?php
                if ($grid_counter == 4 || $grid_counter == 8 ) echo '</div>';
        }       
        $grid_counter++;
        $product_counter++;
        endwhile;
    } else {
    echo __('No products found');
}
wp_reset_postdata();

echo '</div>';

//无法确定为什么要使用计数器值
//将循环设置为返回您想要的任何内容。但是您没有显示循环
$product_counter_max=8；
//将网格计数器设置为1；
$grid_计数器=1；
$product_计数器=0；
回声'；
如果（$loop->have_posts（））{
而（$loop->have_posts（））：$loop->the_post（）；
//根据前面的评论，下一行可能是超级棒
如果（$product\U counter<$product\U counter\U max）{
如果（$grid_counter==1 | |$grid_counter==5）{
回声'；
}否则{
//在第二列和第四列周围添加一个额外的包装div
如果（$grid_counter==2 | |$grid_counter==6）回波“”；
//这是一个内柱
回声'；
}?>
post->ID）；？>“/>