php 将 MySQL table 中获取的图像链接整理成 3 个不同的 div

Question

我想使用 Bootstrap 制作一个包含 3 列的照片库。我的画廊结构应该是这样的：

<div class="row">
   <div class="col-4" id="box1">
      <img class="img-fluid" src="images/image1.jpg">
      <img class="img-fluid" src="images/image4.jpg">
   </div>
   <div class="col-4" id="box2">
      <img class="img-fluid" src="images/image2.jpg">
      <img class="img-fluid" src="images/image5.jpg">
   </div>
   <div class="col-4" id="box3">
      <img class="img-fluid" src="images/image3.jpg">
      <img class="img-fluid" src="images/image6.jpg">
   </div>
</div>

目前，我正在获取 box1 div 中的 imageURL。但是我如何获取图像信息并以这样的方式组织它们，即第一个图像 URL 值在第一个 div (box1) 中作为 src 和在 box2 div 中排名第二，在 box3 div 中排名第三，在 box1 中排名第四，依此类推。我怎样才能循环这个逻辑？

<div class="row">
   <?php
      $imageQuery = $mysqli->query("SELECT imageURL FROM images WHERE album = 'UK' ORDER BY date ASC") or die($mysqli->error);
      while ($rowImage = $imageQuery->fetch_array()) { ?>
   <div class="col-4" id="box1">
      <img class="img-fluid" src="<?php echo $rowImage['imageURL']; ?>">
   </div>
   <?php } ?>
</div>

Answer 1

您应该能够将图像数组分成 3 列，每列 array_chunk()。然后您可以使用普通的 foreach 循环分别迭代 3 列中的每一列。

<?php
$imageQuery = $mysqli->query("SELECT imageURL FROM images WHERE album = 'UK' ORDER BY date ASC");
$images = $imageQuery->fetch_all(MYSQLI_ASSOC);
$images = array_chunk($images, 3);
?>
<div class="row">
   <div class="col-4" id="box1">
   <?php foreach (array_column($images, 0) as $image): ?>
        <img class="img-fluid" src="<?= $image['imageURL']; ?>">
   <?php endforeach; ?>
   </div>
   <div class="col-4" id="box2">
   <?php foreach (array_column($images, 1) as $image): ?>
        <img class="img-fluid" src="<?= $image['imageURL']; ?>">
   <?php endforeach; ?>
   </div>
   <div class="col-4" id="box3">
   <?php foreach (array_column($images, 2) as $image): ?>
        <img class="img-fluid" src="<?= $image['imageURL']; ?>">
   <?php endforeach; ?>
   </div>
</div>

php 将 MySQL table 中获取的图像链接整理成 3 个不同的 div

Organise fetched images links from MySQL table in 3 different div by php

php

mysqli

twitter-bootstrap