如何使用网格顺序在视图中显示result_set图像

时间:2017-05-24 12:07:36

标签: php html css twitter-bootstrap foreach

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

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

我想以下列格式显示视图中的所有图像 The browser view of images sample

我想在第一列中显示第一个图像,第二个图像(如果存在于结果集中)必须在第二列中,同样它继续显示。第四个图像(如果存在于结果集中)必须在第二排.. 到目前为止,我已尝试过以下内容..

<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>

我无法得到我想要的东西。

2 个答案:

答案 0 :(得分: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>

你需要重新定位循环!

答案 1 :(得分:2)

试试这个

<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>