用JS实现3x3拼图绝对定位div遇问题：部分块位置异常求助

问题根源 #

你的JS逻辑中，当列计数器c超过3时，进入else分支仅重置了行列变量，没有给当前循环的拼图块设置left和top样式，导致第4、第8个元素（对应第4、第8次循环迭代）未被赋予定位坐标，停留在默认的(0,0)位置。

修复方案 #

方案1：修正原有判断逻辑

调整变量重置与样式赋值的顺序，确保每个块都能获取到定位坐标，同时补上变量声明避免全局污染：

let r = 1, c = 1
let x = 4, y = 4
randomOrder.forEach(el => {
    const block = document.createElement('div')
    block.classList.add('block')
    block.id = "b" + el
    
    // 先判断是否需要换行，再统一设置位置
    if(c > 3){
        c = 1
        x = 4
        y += 98
        r++
    }
    block.style.left = x + 'px'
    block.style.top = y + 'px'
    c++
    x += 98

    block.innerText = el === 9 ? "" : el
    container.appendChild(block)
})

方案2：基于索引计算位置（更简洁可靠）

利用forEach的索引参数直接计算行列，完全避免判断逻辑出错：

randomOrder.forEach((el, index) => {
    const block = document.createElement('div')
    block.classList.add('block')
    block.id = "b" + el
    
    // 从索引推导行列：index范围0-8
    const col = index % 3 // 列序号：0/1/2循环
    const row = Math.floor(index / 3) // 行序号：0/0/0 → 1/1/1 → 2/2/2
    block.style.left = `${4 + col * 98}px`
    block.style.top = `${4 + row * 98}px`

    block.innerText = el === 9 ? "" : el
    container.appendChild(block)
})

效果说明 #

• 当前实际效果：2个拼图块重叠在容器左上角，其余块正常排列为3x3网格
• 修复后预期效果：所有9个块按随机顺序完整排列为3x3网格，无错位重叠

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