使用Java渲染列中的动态计数div

Question

谁可以用JavaScript编写逻辑以按列呈现div。在每列4个div中。 Divs计数是动态的。

类似的东西

div1 div5 div8
div2 div6 div9
div3 div7 div10
div4 div7 div11 ........

我尝试过地图，但是我不能。

Answer 1

只需为每四个元素创建一个新行：

  const parent = document.body; // or whatever
  let row;
  for(let i = 0; i < 25; i++) {
    if(i % 4 === 0) {
      row = document.createElement("div");
      row.className = "row";
      parent.appendChild(row);
   }

   const child = document.createElement("div");
   child.className = "child";
   child.textContent = "div " + i;
   row.appendChild(child);
 }

Answer 2

如果要以这种方式分隔div，请使用css布局，始终渲染元素而不将元素分隔成某种东西，这就是最佳实践