使用 Angular 材质的 Pinterest 布局

Posted 2023-02-22

【中文标题】使用 Angular 材质的 Pinterest 布局

【英文标题】：Pinterest Layout With Angular Material

【发布时间】：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

---

更新

其他要求：

响应式布局：取决于窗口，有更少或更多的列；但它们总是填满所有可用空间（自适应列宽，例如 100%、50% 等） 卡的插入必须使用ng-repeat="card in cards | orderBy:order:reverse"

【问题讨论】：

所有内容都必须放在一个容器中是否有原因？您能否拥有三个（列）容器并将每张卡片插入 cardCount%3 列？

一个容器的原因是布局必须是响应式的，因此根据当前的分辨率（横向/纵向/屏幕尺寸），布局具有不同的列数。

使用angular-masonry

【参考方案1】：

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

【讨论】：

投了反对票，因为这个例子让你不得不提前将内容分散到不同的列中。这只是一个砌体效果，而不是真正的通用解决方案。

【参考方案2】：

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

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

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

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

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

【讨论】：

您可以使用ng serve 克隆并运行该项目，并在localhost:4200 上查看它。组件存在一些小问题。因此，我们将不胜感激。

【参考方案3】：

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

http://plnkr.co/j5yZQHK3D7l3nPJ8cPlB

您可以使用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 中演示）

【讨论】：

仔细看，顺序不太对。它应该按行（从左到右）而不是按列（从上到下）。就像您对 float:left 的期望一样。除了，它们填充垂直空间。你知道我的意思吗？

【参考方案4】：

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

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

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

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

希望对您有所帮助。

【参考方案5】：

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

你的容器 div

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

...inner divs

</div>

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

【参考方案6】：

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

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

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

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

【讨论】：

这听起来很有希望 - 但是，将响应版本直接作为插件会很棒 - 所以我不必担心更新/维护布局指令......