JavaScript浏览器端无法生成16个盒子网格，makeBox函数位置问题求助

问题根因 #

• makeBox()调用位置错误：当前代码将makeBox()放在两层while循环结束后执行，仅会触发1次调用，自然只能渲染1个盒子
• 缺少网格排版样式：默认div是块级元素，即使生成多个盒子也会默认垂直排布，无法形成网格效果

修复步骤 #

1. 将makeBox()调用移入内层while循环中，每遍历一个网格点位就生成1个盒子，最终生成16*16=256个盒子
2. 给盒子添加float: left样式，让盒子可以横向排列形成网格

修复后完整代码 #

let makeBox = function() {
  let box = document.createElement('div');
  document.body.appendChild(box);
  box.style.width = '28px';
  box.style.height = '28px';
  box.style.border = '1px solid black';
  box.style.float = 'left'; // 新增：实现横向排列
  return box;
};

let makeGrid = function(numberOfRows) {
  let y = 0;
  let x = 0;

  while (y < numberOfRows) {
    x = 0;
    while (x < numberOfRows) {
      makeBox(); // 移入内层循环，每个坐标生成一个盒子
      x = x + 1;
    }
    y = y + 1;
  }
};

makeGrid(16);

可选优化 #

如果要实现严格的每行固定16个盒子的效果，不受页面宽度变化影响，可以新增行容器来包裹每行的盒子：

let makeBox = function(rowContainer) {
  let box = document.createElement('div');
  rowContainer.appendChild(box);
  box.style.width = '28px';
  box.style.height = '28px';
  box.style.border = '1px solid black';
  return box;
};

let makeGrid = function(numberOfRows) {
  let y = 0;
  let x = 0;

  while (y < numberOfRows) {
    // 每行创建独立的flex行容器
    const row = document.createElement('div');
    row.style.display = 'flex';
    document.body.appendChild(row);
    
    x = 0;
    while (x < numberOfRows) {
      makeBox(row);
      x = x + 1;
    }
    y = y + 1;
  }
};

makeGrid(16);

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