具有角度材料的Pinterest布局

Question

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

这是否可以使用普通的角度和CSS？怎么样？

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

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

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

更新

其他要求：

• 响应式布局：根据窗口的不同，列数越来越少;但它们总是填写所有可用空间（自适应列宽，例如100％，50％等）
• 插入卡片必须与ng-repeat="card in cards | orderBy:order:reverse"
一起使用

Answer 1

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

http://plnkr.co/j5yZQHK3D7l3nPJ8cPlB

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

flex

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

Answer 2

我需要完全相同的组件。但是我无法找到纯粹的css解决方案，并且flexbox将卡片从顶部订购到底部。

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

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

https://github.com/kodfarki/ng-pinterest-layout

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

Answer 3

我刚刚发现this link，它为您提供了简单的CSS和html，供您查找所需的显示（甚至响应）。

Answer 4

您应该能够使用角度材料提供的布局属性....

您的容器div

do {...} while (0)

可以在此处找到文档：https://material.angularjs.org/latest/layout/introduction

Answer 5

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

https://github.com/passy/angular-masonry

始终工作得非常好并且易​​于使用。

另外看看这个： http://masonry.desandro.com/#getting-started 因为它被用作许多砖石外观的底层库（pinterest look）。

希望有所帮助。