PHP实现动态多列响应式图片画廊：随机不重复图片加载指南

<?php
// 假设 $conn 已经是一个有效的数据库连接，例如：
// $conn = mysqli_connect("localhost", "username", "password", "database_name");
// if (mysqli_connect_errno()) {
//     die("数据库连接失败: " . mysqli_connect_error());
// }

// 查询语句：从 photo_gallery 表中随机选择所有图片的位置信息
$sql = "SELECT location FROM photo_gallery ORDER BY RAND()";
$result = mysqli_query($conn, $sql);

// 检查查询是否成功
if (!$result) {
    die("数据库查询失败: " . mysqli_error($conn));
}

$queryResults = mysqli_num_rows($result);

// 初始化一个数组来存储每个列的HTML内容，这里假设是4列
$numColumns = 4;
$columnHTML = array_fill(0, $numColumns, ''); // 创建包含 $numColumns 个空字符串的数组

// 初始化列指针，指向下一个要填充的列
$nextColumn = 0;

if ($queryResults > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        // 将图片标签添加到当前列的HTML字符串中
        // 注意：图片路径前添加 '/' 以确保从网站根目录开始
        $columnHTML[$nextColumn] .= "<img src='/".$row['location']."' style='width:100%'>";

        // 移动到下一列，使用模运算符确保在 0 到 $numColumns-1 之间循环
        $nextColumn = ($nextColumn + 1) % $numColumns;
    }
}
?>

<?php
// ... 上面的PHP逻辑 ...

// 输出最终的HTML结构
// 使用 implode 方法更简洁地将所有列的HTML内容组合起来
echo '<div class="row">';
echo '<div class="column">'.
     implode('</div><div class="column">', $columnHTML).
     '</div>';
echo '</div>';

// 释放结果集并关闭数据库连接
mysqli_free_result($result);
mysqli_close($conn);
?>

/* style.css */
* {
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}

.row {
  display: flex;    /* 使用 Flexbox 布局 */
  flex-wrap: wrap;  /* 允许项目换行 */
  padding: 4px;     /* 外层容器的内边距 */
}

/* 创建四等分列的默认样式 */
.column {
  flex: 25%;        /* 在大屏幕上每列占据25%宽度 */
  max-width: 25%;   /* 最大宽度限制 */
  padding: 4px;     /* 列的内边距 */
}

.column img {
  margin-top: 8px;      /* 图片上方间距 */
  vertical-align: middle; /* 垂直对齐 */
  width: 100%;          /* 图片宽度填充列 */
  height: auto;         /* 保持图片比例 */
}

/* 响应式布局 - 在中等屏幕（例如平板）上显示两列 */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* 响应式布局 - 在小屏幕（例如手机）上显示单列 */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}