AngularJs:高度可调的多个立柱

Question

我目前正在将一个项目从jQuery转移到AngularJS。

我从服务器收到JSON格式的"文章"，标题为、作者、日期为和摘要为。我以如下方式将它们显示为div：

<div class="col-sm-4">
<div class="one-article" ng-repeat="article in articles">
<p class="article-title">{{article.title}}</p>
<p class="article-authors"><i class="fa fa-user"></i>
{{article.authors}}
</p>
<p class="article-date">{{ article.date | date:'dd MMM yyyy'}}</p>
</div>  
</div>

因为我使用Bootstrapcol-sm-4，所以我在宽屏幕中有3列。这看起来真的很好。

我的问题：

我现在想包括摘要这篇文章，它的长度可以从零到几个(<100)字不等。因此，显示器看起来很奇怪。我想找到一个优雅的解决方案，为每个div提供不同的高度，以便优化整个显示，在三篇文章的行之间没有任何空白孔。

我尝试了什么

• 在使用jQuery时，我选择了Masonry javascript库。工作还可以，但我的angularjs技术仍然有限，我没能成功转会。此外，如果我可以避免任何外部图书馆，那就太好了(网站也应该在非常低的资源/带宽上工作)
• 为one-articlediv设置一个非常大的高度，或者将抽象大小缩减为有限的字符数。这两种选择都有效，但根本不是我试图获得的

我迄今为止的最佳成绩

当收到来自网站的文章时，定义一个列号，然后在angularJS中使用过滤器：

ng-repeat="article in articles | filter:{column:1}"

虽然这项工作，我不觉得它很"优雅"，因为

• 每次用户删除一篇文章时，我都必须重新计算所有列数
• 我无法使用全局orderBy筛选器
• 我必须在视图中重复代码3次

如果在angularJS方面有更多经验的人有一个想法，或者在最坏的情况下有一个外部插件(但如果可能的话很小)。

谢谢！

Answer 1

制作一个列表列表，并在这些列表上重复。要填充列表，只需使用与计算"列"值相同的方法即可，只需相对少量的cpu即可完成。额外的列表几乎不会占用任何内存，因为它们只包含额外的指针，所以这也不是问题。