具有角度材料的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

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