JavaScript实现图片位置随机化且避免图片重复显示

原代码存在随机重复选取图片的问题，以下是修改后的代码，实现每张图片仅使用一次，同时保持随机位置且不重叠：

const imgPoss = [];
let maxX, maxY;
// 生成洗牌后的图片ID数组，确保每张图只用一次
const NUM_OF_IMAGES = 23;
const START_OF_IMAGES = 1;
let imageIds = Array.from({length: NUM_OF_IMAGES}, (_, i) => i + START_OF_IMAGES);
// Fisher-Yates洗牌算法打乱数组
for (let i = imageIds.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [imageIds[i], imageIds[j]] = [imageIds[j], imageIds[i]];
}
let currentImageIndex = 0;
let placementInterval;

function placeImg() {
    if (currentImageIndex >= imageIds.length) {
        // 所有图片已放置，清除定时器
        clearInterval(placementInterval);
        return;
    }
    const imgId = imageIds[currentImageIndex];
    const imgSrc = `https://elimcgehee.github.io/staticimages/gallery/${imgId}.png`;

    const {random: r} = Math;  
    const x = r() * maxX;
    const y = r() * maxY;
    
    if(!isOverlap(x,y)) {
        // 优化DOM操作：直接创建元素而非拼接innerHTML
        const img = document.createElement('img');
        img.className = 'random';
        img.style.left = `${x}px`;
        img.style.top = `${y}px`;
        img.src = imgSrc;
        document.body.appendChild(img);
        
        imgPoss.push({x, y});
        currentImageIndex++;
    }
}

function isOverlap(x, y) {
    const imgSize = {width: 128, height: 160};
    
    for(const imgPos of imgPoss) {
        if( x > imgPos.x - imgSize.width && x < imgPos.x + imgSize.width &&
            y > imgPos.y - imgSize.height && y < imgPos.y + imgSize.height ) {
            return true;
        }
    }
    return false;
}

onload = function() {
    maxX = innerWidth - 128;
    maxY = innerHeight - 160;
    placementInterval = setInterval(placeImg, 10);
}

onresize = function() {
    maxX = innerWidth - 128;
    maxY = innerHeight - 160;
}

关键改动说明： #

• 洗牌数组生成：用Fisher-Yates算法打乱图片ID数组，保证每个ID仅出现一次，彻底解决重复问题
• 终止条件：当所有图片都放置完成后，自动清除定时器，避免无效执行
• DOM操作优化：改用createElement和appendChild替代innerHTML拼接，提升性能并避免潜在的DOM解析问题
• 修正边界计算：原随机图片ID的计算逻辑可能超出范围（比如生成24号图），洗牌数组直接基于有效ID生成，避免错误

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