jquery - 垂直堆叠动态 div 数，然后在右侧 w 上。css/js

Question

我将动态数量的 div（可变高度）加载到父 div 中。我需要按如下方式加载它们：

----父div ------
-div1- -div5-
-div2- -div6-
-div3- -div7-
-div4- -div8-
---------------------

当我使用 float:left 时，它们会以我不想要的方式堆叠：

-div1- -div2-
-div3- -div4-
-div5- -div6-

有任何想法吗？可以用js检测溢出的div吗？

Answer 1

jsFiddle Demo

在其中添加另一个 div 以模拟列

----parent div ------
--sub-- | --sub--
 -div1- | -div5-
 -div2- | -div6-
 -div3- | -div7-
 -div4- | -div8-
------- | -------
---------------------

Answer 2

If you are targeting only modern browsers

A flexbox is perfect for this:

HTML :

<div class="parentDiv"></div>

CSS: (Works for chrome. Use relevant prefixes -ms -moz -o as required)

.parentDiv{
    display:-webkit-flex;
    -webkit-flex-flow: column wrap; 
    width : 60px;
    height: 100px
}
.parentDiv div{
    width:20px;
    height:24px;
}

JS / JQUERY:

$(function() {       
    for(var i=1; i<7; i++)  $(".parentDiv").append($("<div>").text("div"+i));
});

DEMO