Javascript 用于web的Windows 8样式列表视图

我希望能够像在Windows8列表视图中那样以网格形式显示项目。项目将是正方形（瓷砖）

我可以通过创建位于同一行上的div来让它们像这样显示

项目1项目2项目3

项目4项目5项目6

但我希望他们能像这样展示

项目1项目3项目5

项目2项目4项目6

我想知道是否有人知道如何做到这一点。

我这里有一个演示

---

通过这个演示，我们在javascript中设置每个

li

项的

宽度和
高度，并在CSS中设置列表的
高度或
最大高度，但Windows 8应用程序中使用的ListView控件是一个自定义控件，在WinJS框架之外不可用。发动机确实执行了此操作，并对其进行了详细说明。flexbox的跨浏览器支持非常好（请参阅）。
flexbox包括垂直排列元素和包裹元素的功能。这两件事的结合将实现您所寻找的。类似这样的内容（我将为您保留所有供应商前缀，只使用-ms版本）：


项目1
项目2
项目3
项目4
项目5
项目6
/*CSS片段*/
.家长{
显示：-ms flexbox；
-ms-flex-wrap:wrap；
-ms-flex方向：列；
高度：300px；/*调整以创建要查找的两行*/
}
.parent>div{
/*您可能需要在此处为子对象设置一些flex属性*/
}
这两个有什么不同？我想他很担心我忘了更改它。最简单的方法是使用一个浮动容器，其中包含第1项、第2项，然后是另一个浮动容器，其中包含第3项和第4项，依此类推。语法方面，从技术上讲，这些项目不会在一起，但它应该会提供您想要的效果。问题是内容是动态生成的，项目的数量是可变的。谢谢您的回答。这对我很有效。我选择它而不是杰里米·福斯特的，因为我认为它将提供更广泛的兼容性。
<!-- HTML snippet -->
<div class="parent">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
</div>

/* CSS snippet */
.parent {
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  height: 300px; /* adjust to create the two rows you're looking for */
}

.parent > div {
  /* you may want to set some flex properties on the children here */
}