如何程序化生成含GLITCH版本的GIF网格HTML代码？

嘿，这个故障艺术GIF网格的想法太有意思了！我来帮你搞定用PHP glob排除特定字符串的问题，同时给你一套完整的实现方案。

第一步：先明确文件命名规则 #

首先得让你的GIF文件命名有规律，这样才能对应上正常版和故障版。比如我推荐这种命名方式：

• 正常GIF：sunset.gif、cat.gif
• 左侧故障版：sunset_glitch-left.gif、cat_glitch-left.gif
• 右侧故障版：sunset_glitch-right.gif、cat_glitch-right.gif

这样我们只需要先找到所有不含glitch关键词的正常GIF，就能自动匹配对应的故障版文件。

第二步：用glob+array_filter排除特定字符串 #

glob本身没有直接的排除参数，但我们可以先获取所有GIF，再过滤掉包含指定关键词的文件，这是最直观且可靠的方案：

// 替换成你的GIF文件夹路径
$gifDir = 'assets/gifs/';
// 获取文件夹下所有GIF文件
$allGifs = glob($gifDir . '*.gif');

// 过滤掉包含"glitch"的文件，得到纯正常GIF列表
$normalGifs = array_filter($allGifs, function($filePath) {
    // 检查文件名中是否包含"glitch"，不包含则保留
    return strpos(basename($filePath), 'glitch') === false;
});

// 可选：按自然顺序排序文件，避免杂乱
natsort($normalGifs);

如果你不想用array_filter，也可以尝试shell通配符的排除写法（比如glob($gifDir . '*[!glitch].gif')），但兼容性不如array_filter，所以更推荐前者。

第三步：生成网格布局HTML #

遍历正常GIF列表，自动拼接对应的故障版路径，生成每行三列的结构：

// 输出网格容器
echo '<div class="gif-grid">';

foreach ($normalGifs as $normalGifPath) {
    // 解析文件名和扩展名
    $fileInfo = pathinfo($normalGifPath);
    $baseName = $fileInfo['filename'];
    $extension = $fileInfo['extension'];
    
    // 构造左右故障版的路径
    $glitchLeftPath = $gifDir . $baseName . '_glitch-left.' . $extension;
    $glitchRightPath = $gifDir . $baseName . '_glitch-right.' . $extension;

    // 生成一行三列的HTML（这里用原生flex布局，也可以换成Bootstrap等框架的网格）
    echo '<div class="gif-row">';
        // 左侧故障版
        echo '<div class="gif-column">';
            if (file_exists($glitchLeftPath)) {
                echo '<img src="' . $glitchLeftPath . '" alt="Glitch Left: ' . $baseName . '">';
            } else {
                echo '<div class="placeholder">缺少左侧故障版</div>';
            }
        echo '</div>';
        // 中间正常版
        echo '<div class="gif-column">';
            echo '<img src="' . $normalGifPath . '" alt="Normal: ' . $baseName . '">';
        echo '</div>';
        // 右侧故障版
        echo '<div class="gif-column">';
            if (file_exists($glitchRightPath)) {
                echo '<img src="' . $glitchRightPath . '" alt="Glitch Right: ' . $baseName . '">';
            } else {
                echo '<div class="placeholder">缺少右侧故障版</div>';
            }
        echo '</div>';
    echo '</div>';
}

echo '</div>';

第四步：添加CSS样式让网格正常显示 #

给网格加一点基础样式，保证布局整齐美观：

.gif-grid {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.gif-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gif-column {
    flex: 1;
    min-width: 0; /* 防止长文件名撑破布局 */
}

.gif-column img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.placeholder {
    width: 100%;
    height: 200px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 4px;
}

额外优化建议 #

• 如果你的故障版命名规则不同（比如用前缀而非后缀），只需要修改构造故障版路径的逻辑即可。
• 可以把GIF路径生成的逻辑封装成独立函数，让代码更整洁易维护。
• 如果需要批量生成故障版GIF，也可以结合PHP的图像处理扩展（比如GD或Imagick）自动生成，不过这就是另一个话题啦。

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