html - 带 Angular Material 的 Pinterest 布局

Question

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

这可以用普通的 Angular 和 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

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

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

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

看看working React solution . 响应解决方案是available here .