PHP实现按项目动态展示文件夹图片及奇偶布局适配

1. 获取指定项目的图片列表 #

利用glob()匹配目标项目的图片文件，再通过自定义排序确保图片按序号从小到大排列（避免文件系统默认排序打乱顺序）：

// 从数据库或URL参数获取当前项目ID
$project_id = $_GET['project_id'] ?? 1; 
// 替换为你的服务器图片文件夹绝对路径
$image_dir = $_SERVER['DOCUMENT_ROOT'] . '/path/to/your/images/'; 
$image_pattern = $image_dir . $project_id . '*.webp';
$images = glob($image_pattern);

// 按图片序号排序
usort($images, function($a, $b) use ($project_id) {
    $num_a = (int)str_replace([$project_id, '.webp'], '', basename($a));
    $num_b = (int)str_replace([$project_id, '.webp'], '', basename($b));
    return $num_a - $num_b;
});

2. 实现奇偶自适应的网格布局 #

用CSS Grid搭建基础布局，再通过PHP判断图片数量的奇偶性，给最后一张图添加全屏类：

CSS 样式 #

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin: 2rem 0;
}

.image-grid .full-width {
    grid-column: 1 / -1; /* 占满整行 */
}

.image-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px; /* 可选：添加圆角 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr;
    }
}

PHP 循环输出图片 #

$total_images = count($images);
if ($total_images > 0): ?>
    <div class="image-grid">
        <?php foreach ($images as $index => $image): 
            $is_full_width = ($index === $total_images - 1) && ($total_images % 2 !== 0);
            $img_class = $is_full_width ? 'full-width' : '';
            // 生成前端可访问的相对路径
            $img_src = str_replace($_SERVER['DOCUMENT_ROOT'], '', $image);
        ?>
            <img src="<?= htmlspecialchars($img_src) ?>" 
                 alt="项目图片 <?= $index + 1 ?>" 
                 class="<?= $img_class ?>">
        <?php endforeach; ?>
    </div>
<?php else: ?>
    <p>该项目暂无展示图片</p>
<?php endif; ?>

3. 关键注意事项 #

• 路径安全：使用绝对路径定位图片文件夹，避免路径遍历风险；用htmlspecialchars()转义图片路径，防止XSS攻击。
• 排序必要性：glob()的返回顺序依赖文件系统排序，必须手动排序才能保证图片按序号展示。
• 灵活性：可以根据需求调整gap、grid-template-columns等CSS属性，适配不同的设计风格。

内容的提问来源于stack exchange，提问作者user19774537