如何以网格顺序在视图中显示 result_set 图像答案

【问题标题】：how to show result_set images in view with grid order如何以网格顺序在视图中显示 result_set 图像
【发布时间】：2018-10-03 19:45:40
【问题描述】：

我从数据库中获取所有记录并传递给视图。数据数组：

Array ( 
  [image_info] => 
     Array ( [0] =>
       Array ( [file_name] => DSC00081.JPG  )
             [1] => 
       Array ( [file_name] => DSC00082.JPG  ) 
             [2] => 
       Array ( [file_name] => DSC00083.JPG )
     )
   )

我想以以下格式显示视图中的所有图像

我想在第一列显示第一张图片，第二张图片（如果存在于结果集中）必须在第二列，同样如此。第四张图片（如果存在于结果集中）必须在第二排。。到目前为止，我已经尝试了以下..

<section id="services" class="services-section section-global-wrapper">
<div class="container">
            <div class="row">

            <ul>
            <div class="col-md-4 col-sm-6">
                <?php 
                foreach($image_info as $images)
                { ?>
                    <img src="<?php echo base_url();?>upload/<?php echo $images['folder_name'].'/'.$images['file_name'];?>" height="400" alt="Image of second carousel"/>
                <?php } ?>

            </div>  

            </ul>

          </div>

        </div>

</section>

我无法得到我想要的。

【问题讨论】：

你检查过这个值$images['folder_name']吗？
@vel 是的，它来了..！
@Keynes，检查我的答案，我认为它应该工作！如果不在那里让我知道。
@Keynes，你能检查超过 3 个值吗？我也更新了我的答案。
@ShaunakShukla，我尝试了 5 张图片，但这些图片没有以我想要的方式列出，如上图所示。我还需要在两者之间添加一些填充物……！

标签： php html css twitter-bootstrap foreach

【解决方案1】：

试试这个

<section id="services" class="services-section section-global-wrapper">
    <div class="container">


            <?php 
            $Inc = 1;
            foreach($image_info as $images){ 
                if($Inc==4 || $Inc==1){ 
                $Inc=1;                     
                echo '<div class="row">';                       
            }
            ?>
                <div class="col-md-4 col-sm-6">
                    <img src="<?php echo base_url();?>upload/<?php echo $images['folder_name'].'/'.$images['file_name'];?>" height="400" alt="Image of second carousel"/>
                </div>  

            <?php 

                $Inc++;
            if($Inc==4){                                            
                echo '</div>';                      
            }
                } 
            ?>

      </div>

    </div>

</section>

【讨论】：

我得到了列出的图像，但没有正确的格式，如上图所示..！
是否可以在网格视图中使用适当的 css 显示？
它运行良好，两个代码都在运行..我将编辑答案并现在使用 css 链接发布

【解决方案2】：

    <section id="services" class="services-section section-global-wrapper">
    <div class="container">
 <?php $i=0;
                    foreach($image_info as $images)
                    { if($i%3==0) { ?>
                <div class="row">
   <?php } ?>  <ul>
                <div class="col-md-4 col-sm-6">

                        <img src="<?php echo base_url();?>upload/<?php echo $images['folder_name'].'/'.$images['file_name'];?>" height="400" alt="Image of second carousel"/>


                </div>  
     </ul>

   <?php if($i%3==2) { ?>
              </div>
 <?php } $i++; } ?>

            </div>

    </section>

您需要重新定位循环！

【讨论】：

很好，它是按顺序来的。 ..但是如果我有第四张图片怎么办。它会去第二排吗？我没有给你 -ve 投票或 +ve 投票...
你给了我-ve吗？
您可以尝试使用 3 个以上的值吗？
我尝试了 5 个值，它没有到第二行，但我没有得到上图中提到的所需外观。我也需要图像之间的间隙
好的，但是您在 3 之后将它们放入新行，对吧？