使用 PHP 将 MySQL 结果拆分为多行的 3 列

Question

我想在我的网站上显示一个画廊部分。

有 3 张幻灯片，我想在每张幻灯片中显示 3 列。第一列应该是 col-md-6，第二列和第三列应该是 col-md-3。 在第一列中，我只想显示 1 张图像，而在第二列和第三列中显示 2 张图像。

我对如何拆分引导列感到非常困惑。我想拆分列，就像下面的截图：

这是我要创建的 html 代码：

 <div class="gallery-slick">
    <div class="slide">
        <div class="col-md-6">
            <img src="g1.png" alt="1" />
        </div>
        <div class="col-md-3">
            <img src="g2.png" alt="1" />
            <img src="g3.png" alt="1" />
        </div>
        <div class="col-md-3">
            <img src="g4.png" alt="1" />
            <img src="g5.png" alt="1" />
        </div>
    </div>
    <div class="slide">
        <div class="col-md-6">
            <img src="g6.png" alt="1" />
        </div>
        <div class="col-md-3">
            <img src="g7.png" alt="1" />
            <img src="g8.png" alt="1" />
        </div>
        <div class="col-md-3">
            <img src="g9.png" alt="1" />
            <img src="g10.png" alt="1" />
        </div>
    </div>
    <div class="slide">
        <div class="col-md-6">
            <img src="g10.png" alt="1" /
        </div>
        <div class="col-md-3">
            <img src="g12.png" alt="1" /
            <img src="g13.png" alt="1" /
        </div>
        <div class="col-md-3">
            <img src="g14.png" alt="1" /
            <img src="g15.png" alt="1" /
        </div>
    </div>
 </div>

这是来自数据库的数据：

 Array
 (
     [0] = stdClass Object
         (
             [id] = 2
             [photo] = upload/gallery/gallery_image_1836387580.png
         )
 
     [1] = stdClass Object
         (
             [id] = 3
             [photo] = upload/gallery/gallery_image_1367321200.png
         )
 
     [2] = stdClass Object
         (
             [id] = 4
             [photo] = upload/gallery/gallery_image_1422567964.png
         )
 
     [3] = stdClass Object
         (
             [id] = 5
             [photo] = upload/gallery/gallery_image_2112675692.png
         )
 
     [4] = stdClass Object
         (
             [id] = 6
             [photo] = upload/gallery/gallery_image_110346512.png
         )
 
     [5] = stdClass Object
         (
             [id] = 7
             [photo] = upload/gallery/gallery_image_915229176.png
         )
 
     [6] = stdClass Object
         (
             [id] = 8
             [photo] = upload/gallery/gallery_image_400191899.png
         )
 
     [7] = stdClass Object
         (
             [id] = 9
             [photo] = upload/gallery/gallery_image_1354992115.png
         )
 
     [8] = stdClass Object
         (
             [id] = 10
             [photo] = upload/gallery/gallery_image_1844003279.png
         )
 
     [9] = stdClass Object
         (
             [id] = 11
             [photo] = upload/gallery/gallery_image_383841711.png
         )
 
     [10] = stdClass Object
         (
             [id] = 12
             [photo] = upload/gallery/gallery_image_1783795689.png
         )
 
     [11] = stdClass Object
         (
             [id] = 13
             [photo] = upload/gallery/gallery_image_1138891555.png
         )
 
     [12] = stdClass Object
         (
             [id] = 14
             [photo] = upload/gallery/gallery_image_335457236.png
         )
 
     [13] = stdClass Object
         (
             [id] = 15
             [photo] = upload/gallery/gallery_image_2106903436.png
         )
 
 )

这是我尝试过但没有成功的代码：

 <?php 
   $gallery = $this-crud-getDataAll('gallery'); 
   $i = 1;
   foreach ($gallery as $photo) {
    if ($i > 0 AND $i % 3 == 0) {
      echo '<div class="row">';
        echo '<div class="col-md-3">';
        echo 'Cell '.$i;
        echo '</div>';
      echo '</div>';
    }
    $i++;
   }
 ?>

Answer 1

你得到的代码只是一个基本的尝试，甚至没有尝试创建 col-md-6 部分，更不用说尝试拆分为更复杂的布局。也没有尝试创建图像标签或外部 HTML。您完成这项任务并没有走得太远。

下面的代码将实现您指定的 HTML。请注意，它使用 5 的模数，因为您希望每 5 张图片开始一张新幻灯片并有一个 md-6 列，而不是每 3 张。然后它只需要在它 不是 模数时创建 md-3 列。并且它还需要在该部分中增加 $i 一个额外的时间，以在一个 div 中获取 2 个图像。 $i 也需要从 0 开始，而不是 1。

$gallery = $this-crud-getDataAll('gallery'); 
echo '<div class="gallery-slick">';

for ($i = 0; $i < count($gallery); $i++) {
  if ($i % 5 == 0) {
    if ($i > 0) echo '</div>';
    echo '<div class="slide">';
    echo '<div class="col-md-6">';
    echo '<img src="'.$gallery[$i]->photo.'" alt="'.$gallery[$i]->id.'" />';
    echo '</div>';
  }
  else
  {
    echo '<div class="col-md-3">';
    echo '<img src="'.$gallery[$i]->photo.'" alt="'.$gallery[$i]->id.'" />';
    $i++;
    echo '<img src="'.$gallery[$i]->photo.'" alt="'.$gallery[$i]->id.'" />';
    echo '</div>';
  }
}
if ($i > 0) echo '</div>';
echo '</div>';

演示：http://sandbox.onlinephpfunctions.com/code/d165a0f9ec5320c031d4b0249179e13f6624aebc