JavaScript:Move<；部门>；元素，位于列中两项之后的右侧

我真的不知道如何用语言来解释这一点，所以我会在照片中这样做：

因此，基本上我希望代码将div标记写在同一列上的两个项目之后的右边。箭头将显示项目的模式

这是我的密码：

<script>
    imgs = ["/images/toilet.jpg", "/images/kitchen.jpg"]; 
    for (var i=0,l=imgs.length; i<l; i++)
    {
        document.write("<div class='item'><img class='imgitem' src='" + imgs[i] + "'></div>");
    }
</script>

imgs=[“/images/toilet.jpg”、“/images/kitchen.jpg”]；
对于（var i=0，l=imgs.length；i使项目向右浮动，然后在写入第四个项目后，使用
style=“clear:both”
添加一个div并写入下一行

另一种选择是使用类似的库。
这样做不需要JavaScript


columns属性是列宽和列数的简写。我喜欢单独使用列宽，因为它更适合响应性设计，但您可以指定精确的列数（
列：4
）

也许您只能使用CSS：

.item {
    display: inline-block;
    *display: inline; /* IE7 Hack */
    zoom: 1; /* FOR IE again... */
    max-width: 25%;
}

并使容器的宽度为4个图像。
Hmmm…按照您当前的操作过程（使用JavaScript）来实现此行为，您可以使用类似的方法（更改文档。使用innerHTML方法编写，希望您不介意）：

请注意，此脚本需要在正文中添加一个
来替换的innerHTML。这里的关键是在每两个
.item
元素周围添加
.col wrap
元素，允许您将它们放置在高度为2的列中

（编辑）哦，对了，如果你想知道这可能是什么样子的话，这里有一个例子。（通过一些额外的样式，这有点不同，因为我无法访问你的图像，但脚本背后的想法仍然存在。）

我希望这是您所寻找的行为！如果不是，请随时告诉我，我将很乐意进一步帮助您。祝您好运！
如果我理解正确，您只想影响布局？这可能是通过CSS最简单的方法。请不要使用document.write！使用appendChild等将元素添加到父元素抱歉，我希望我知道怎么做。我知道HTML部分，但不知道JS。
.item {
    display: inline-block;
    *display: inline; /* IE7 Hack */
    zoom: 1; /* FOR IE again... */
    max-width: 25%;
}

imgs = ["/images/toilet.jpg", "/images/kitchen.jpg"];
var imgHtml = "";
for (var i=0; i<imgs.length; i++)
{
    if (i % 2 == 0){
        imgHtml += "<div class='col-wrap'>";
    }
    imgHtml += "<div class='item'><img class='imgitem' src='" + imgs[i] + "'></div>";
    if (i % 2 != 0 || i == imgs.length - 1){
        imgHtml += "</div>";
    }
}
document.getElementById("wrapper").innerHTML = imgHtml;

.col-wrap{
    display:inline-block;
    *display: inline;
    zoom: 1;
    vertical-align:top;
}