0

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

解释 所以，基本上我希望代码在同一列上的 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>
4

4 回答 4

0

使您的项目向右浮动，然后在写入第 4 个项目后，添加一个 divstyle="clear:both"并写入下一行。

另一种选择是使用像masonry这样的库。

于 2013-07-05T15:29:15.727 回答
0

你不需要 JavaScript 来做到这一点。

http://cssdeck.com/labs/pml2y1dl

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

columns 属性是 column-width 和 column-count 的简写。我喜欢单独使用列宽，因为它更适合响应式设计，但您可以指定确切的列数来代替 ( columns: 4)。

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

于 2013-07-05T15:38:03.537 回答
0

也许你只能使用 CSS ：

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

并使您的容器具有 4 个图像的宽度。

于 2013-07-05T15:43:13.293 回答
0

嗯...按照您当前的操作过程（使用 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 的列中。

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

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

于 2013-07-05T15:56:39.140 回答