JavaScript：在列</div>中的2个项目后向右移动<div>元素

Question

我真的不知道如何用文字解释这个，所以我会在一张照片中做到：

所以，基本上我希望代码在同一列上的2个项目之后向右写入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>

Answer 1

让你的物品浮动，然后在写完第4个项目之后，添加一个带有style="clear:both"的div并写下一行。

另一种方法是使用像masonry这样的库。

Answer 2

您不需要JavaScript来执行此操作。

http://cssdeck.com/labs/pml2y1dl

.container {
  -webkit-columns: 50px;
  -moz-columns: 50px;
  columns: 50px;
}

columns属性是列宽和列数的简写。我赞成单独使用列宽，因为它在响应式设计中效果更好，但您可以指定确切的数字列（columns: 4）。

http://caniuse.com/#feat=multicolumn

Answer 3

也许你只能使用CSS：

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

使您的容器宽度为4张图片。

Answer 4

嗯...沿着你当前的行动方式（使用JavaScript）来实现这种行为，你可以使用这样的东西（将document.write改为innerHTML方法，我希望你不要介意）：

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;

相关的CSS：

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

请注意，您需要为此脚本添加<div id="wrapper"></div>以替换innerHTML。这里的关键是在每两个.col-wrap元素周围添加.item元素，允许您将它们放在高度为2的列中。

（编辑）哦，对，如果您想知道这可能是什么样子，请example on CodePen。 （由于我无法访问您的图片，因此有些额外的样式会有所不同，但脚本背后的想法仍然存在。）

我希望这是你正在寻找的行为！如果不是，请随时告诉我，我会很乐意为您提供进一步的帮助。祝你好运！