javascript - 在生成HTML内容的for循环中放置换行符

我有一个for循环，正在生成一些HTML内容：

var boxes = "";

for (i = 0; i < 11; i ++) {
    boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
}

document.getElementById("id").innerHTML = boxes;

我想在一行中显示3个框，然后在它们下面一行显示2个框，然后显示1，然后再显示3个，2和1。

首先，我想到了使用if语句来检查i> 2是否添加换行符，但是在第三个框之后的每个框之后也将添加换行符。什么都没想到，我对javascript的基本了解告诉我，我必须为要创建的每一行创建一个循环。有什么建议吗？

最佳答案

您可以尝试如下操作：

理念


保留批次大小的数组
遍历数组并检查迭代器是否与位置齐平
如果是，请更新位置和索引以获取下一个位置

var boxes = "";
var intervals = [3, 2, 1];
var position = intervals[0];
var index = 0;
for (i = 0; i < 11; i++) {
  boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
  if ((position-1) === i) {
    boxes += "<br/>";
    index = (index + 1) % intervals.length;
    position += intervals[index]
  }
}

document.getElementById("content").innerHTML = boxes;

.box{
  display: inline-block;
}

<div id="content"></div>