Google+ / Pinterest 风格的卡片布局，带有角度材料答案

【问题标题】：Google+ / Pinterest style card layout with angular materialGoogle+ / Pinterest 风格的卡片布局，带有角度材料
【发布时间】：2016-03-11 02:41:47
【问题描述】：

我正在尝试使用有角材料构建卡片布局，该布局将允许卡片具有可变高度并能够根据窗口宽度更改显示的列数。

几乎得到我正在寻找的东西是非常简单的动态高度。

几周前我尝试过angular-masonry，但无法使其正常工作，我可能会再次尝试使用角砌石，但理想情况下希望在不使用额外的 JavaScript 库的情况下实现它。

目前，我通过在多列上重复然后有选择地将我的卡片添加到每一列来实现我想要的，例如，如果我有两列将奇数卡片添加到第 1 列，将偶数卡片添加到第 2 列，但这会导致新元素每当列调整大小时呈现并添加到 DOM。我希望能够使用相同的元素并通过 css 实现所需的行为。

【问题讨论】：

角砌石是正确的方向，朋友，再试一次。我很少推荐外部库，但 masonry 是轻量级的，可以为您节省数周的工作量。
谢谢朋友！经过大约 20 分钟的调整后，angular-masonry 就像一个魅力。实际上是几个月前，当我第一次尝试时，我不记得到底出了什么问题，但我真的很沮丧，发现我上面描述的解决方法就这样离开了，然后继续研究其他部分该项目知道我以后必须回来寻找更好的方法来做到这一点。从那以后它就一直在我的脑海里，哈哈，我必须回去看看我以前的提交，看看我当时做错了什么，但这次效果很好。干杯:)

【解决方案1】：

您是否尝试过使用column-count？

column-count: $columns;
column-gap: 0px;
-moz-column-count: $columns;
-moz-column-gap: 0px;
-webkit-column-count: $columns;
-webkit-column-gap: 0px;

您可以将其包装在 @media 查询中以获得不同的大小。

【讨论】：

嗨，是的，我尝试了列计数。 2 个问题：它将卡片放在列的下方而不是跨行，并且当加载新卡片时卡片切换列。对我来说，两者都不是可以做的条件。
我没有意识到这一点（因为我只是使用静态数据来模拟它）。我最近遇到了 Angular Deckgrid：github.com/akoenig/angular-deckgrid你试过了吗？