动态创建的div行布局错乱问题求助（float-left失效相关）

问题说明 #

我用以下JavaScript代码创建两行包含图片的Div，预期实现整齐的两行布局（每行图片块均匀排列，无跨行错位），但实际运行时经常出现布局随机错乱的情况（图片块跨行、排列混乱）。

原代码 #

// 第一行创建逻辑（原代码外层应有遍历orderone的for循环）
{var x = document.createElement('div'); 
x.setAttribute('class','rowone');
x.setAttribute('id',i);
var move = 4;
x.style.marginLeft = move + "%";
x.addEventListener('click',clickdata,'false');
     } // 创建单个div块
{ 
  var p = document.createElement('IMG');
  p.style.width = "80%";
  p.style.height="100%";
   p.src = orderone[i];
x.appendChild(p);
   } // 为div添加图片
document.body.append(x); // 将div追加到页面
} // 第一行创建及事件绑定结束

// 第二行创建逻辑
for(var j = 0; j < 8; j++){
{
var x = document.createElement('div'); x.setAttribute('class','rowtwo');
x.setAttribute('id',j+8);
var moverow = 4;
x.style.marginLeft = moverow + "%";
x.addEventListener('click',secondclick, 'false');
} // 创建单个div块
{ 
/*var p = document.createElement('p');
p.innerHTML = ordertwo[j];*/
  var otherp = document.createElement('IMG');
  otherp.style.width = "80%";
  otherp.style.height="100%";
   otherp.src = ordertwo[j];
x.appendChild(otherp);
  } // 为div添加图片
document.body.append(x); // 将div追加到页面
 }

（注：orderone和ordertwo为存储图片地址的数组）

问题核心原因 #

1. 图片异步加载触发布局重排：图片加载是异步过程，浏览器先渲染空的Div，等图片加载完成后才会根据图片实际尺寸调整布局，导致原本排列好的块被挤错位。
2. 无行容器隔离：直接将所有Div追加到document.body，没有用容器分别包裹两行，流式布局下元素容易跨行混乱。
3. 布局控制不严谨：仅用内联marginLeft控制间距，未明确设置Div的宽度、排列规则，无法保证每行元素整齐分布。

修复方案 #

1. 为每行添加容器，隔离两行布局 #

先创建两个容器分别包裹两行的Div，确保两行元素独立：

// 创建第一行容器
const rowOneContainer = document.createElement('div');
rowOneContainer.classList.add('row-container');
document.body.appendChild(rowOneContainer);

// 创建第二行容器
const rowTwoContainer = document.createElement('div');
rowTwoContainer.classList.add('row-container');
document.body.appendChild(rowTwoContainer);

2. 用CSS统一控制布局（替代内联样式） #

通过CSS弹性布局实现每行元素均匀排列，同时固定元素尺寸避免重排：

.row-container {
  display: flex;
  justify-content: space-around; /* 元素均匀分布 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  margin: 15px 0;
}

.rowone, .rowtwo {
  width: 10%; /* 根据每行8个元素调整，预留间距 */
  height: auto;
}

.rowone img, .rowtwo img {
  width: 100%;
  height: auto; /* 保持图片比例 */
  display: block; /* 消除图片底部空白 */
}

3. 修改JavaScript代码，优化元素创建逻辑 #

移除内联布局样式，将Div追加到对应行容器，同时提前设置图片尺寸：

// 第一行创建逻辑（补全外层遍历）
for(let i = 0; i < orderone.length; i++){
  const x = document.createElement('div'); 
  x.classList.add('rowone');
  x.setAttribute('id', i);
  x.addEventListener('click', clickdata); // 第三个参数默认false，无需传字符串

  const img = document.createElement('img');
  img.src = orderone[i];
  img.width = 100; // 提前设置宽高，避免加载后重排
  img.height = 100;
  x.appendChild(img);

  rowOneContainer.appendChild(x); // 追加到第一行容器
}

// 第二行创建逻辑
for(let j = 0; j < ordertwo.length; j++){
  const x = document.createElement('div'); 
  x.classList.add('rowtwo');
  x.setAttribute('id', j+8);
  x.addEventListener('click', secondclick);

  const img = document.createElement('img');
  img.src = ordertwo[j];
  img.width = 100;
  img.height = 100;
  x.appendChild(img);

  rowTwoContainer.appendChild(x); // 追加到第二行容器
}

可选：预加载图片彻底避免重排 #

如果图片尺寸不确定，可先预加载所有图片，完成后再渲染布局：

// 图片预加载函数
function preloadImages(imgArr) {
  return Promise.all(imgArr.map(src => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = src;
    });
  }));
}

// 预加载完成后再渲染
Promise.all([preloadImages(orderone), preloadImages(ordertwo)])
  .then(() => {
    // 执行上述Div创建及渲染逻辑
  })
  .catch(err => console.error('图片加载失败:', err));

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