javascript - 适用于 Web 的 Windows 8 样式列表视图

Question

我希望能够像在 Windows 8 Listview 中那样在寻找的网格中显示项目。这些项目将是正方形（瓷砖）。

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

项目 1 项目 2 项目 3

第 4 项 第 5 项 第 6 项

但我希望他们像这样显示

项目 1 项目 3 项目 5

第 2 项 第 4 项 第 6 项

我想知道是否有人知道如何实现这一目标。

Answer 1

我在这里有一个演示JsBIN

通过这个演示，我们在 javascript中设置每个项目的widthand和在 CSS 中设置列​​表的or 。heightliheightmax-height

Answer 2

IE10 引擎与 Windows 8 使用的引擎相同，但在 Windows 8 应用程序中使用的 ListView 控件是在 WinJS 框架之外不可用的自定义控件。该引擎确实实现了CSS flexbox 标准并在此处详细说明。对 flexbox 的跨浏览器支持非常好（参见此处）。flexbox 包括垂直排列元素和换行的能力。这两件事的结合将实现您正在寻找的东西。像这样的东西（我会省掉你所有的供应商前缀，只使用 -ms 版本）：

<!-- 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 */
}