【问题标题】：Pinterest Layout With Angular Material使用 Angular 材质的 Pinterest 布局
【发布时间】：2017-04-06 04:33:03
【问题描述】：

我需要Angular Material 的以下布局，卡片从左到右插入，在可用宽度的末端换行并填充卡片之间的任何垂直空间。所有卡片的宽度相同，但高度不同：

这可以用普通的 Angular 和 CSS 实现吗？怎么样？

我尝试使用display:flex 完成此操作，但无法摆脱垂直空间：

.cards {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
}

我还找到了一个纯 CSS 解决方案，解决了空间问题，但顺序不同，还需要固定高度： https://codepen.io/michellebarker/pen/zvxpoG

更新

其他要求：

【问题讨论】：

【解决方案1】：

我刚刚找到 this link，它为您提供了简单的 css 和 html 用于您正在寻找的显示（它甚至是响应式的）。

【讨论】：

【解决方案2】：

我需要完全相同的组件。但是我找不到纯css的解决方案，flexbox把卡片从上到下排序。

有一些基于 AngularJS 的选项。但是由于我使用的是 Angular，所以我无法使用它们。

因此，我开发了一个从左到右定位元素的组件。元素具有相同的宽度和不同的高度。组件通过计算 x 和 y 坐标来定位每个元素：

您可能想尝试一下，即使该组件正在开发中。

【讨论】：

【解决方案3】：

我创建了一个 plunkr，向您展示如何实现这一点的概念证明。

您可以使用layout-wrap 和flex 来完成您想要的布局类型，而基本上不需要css。

<div layout="column" layout-wrap>
  <md-card ng-repeat="card in vm.cards | orderBy:'order':!reverse" flex>
    ...
  </md-card>
</div>

这样做是调整您的行，以便内容只占用它需要的空间，但每列的大小保持不变。这是两全其美！此外，您可以以任何需要的方式订购它们（也在 plunkr 中演示）

【讨论】：

【解决方案4】：

我在几个项目中使用了这个角度解决方案：

一直运行良好且易于使用。

也看看这个： http://masonry.desandro.com/#getting-started 因为它在许多砌体外观（pinterest 外观）中用作底层库。

希望对您有所帮助。

【讨论】：

【解决方案5】：

你应该可以使用 angular material 提供的布局属性......

你的容器 div

<div layout="column" layout-wrap layout-align="start space-between">

...inner divs

</div>

【讨论】：

【解决方案6】：

目前我无法为您提供 Angular 解决方案，但是如果您能够将 React 解决方案转换为 Angular，那么以下算法和代码可能会有所帮助。

因此，为了生成该布局，将项目划分为 n 列，并让默认布局垂直堆叠它们。然后使用 flexbox 或百分比宽度对这些列进行布局。

为了使网格响应订阅窗口调整大小事件并计算所需的列数。 columnCount = itemWidth => availableWidth => Math.floor(availableWidth / itemWidth)

【讨论】：