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>

因为我使用Bootstrap col-sm-4，所以我在宽屏幕上有3列。这看起来非常好。

我的问题：

我现在想要包含文章 abstract ，其长度可以从零到几（<100）个单词不等。出于这个原因，显示器看起来很奇怪。我想找到一个优雅的解决方案，为每个div设置不同的高度，以便优化整个显示，在三篇文章的行之间没有任何空白洞。

我尝试了什么

在使用jQuery时，我选择了Masonry javascript库。工作正常，但我的angularjs技能仍然有限，我没有设法转移。此外，如果我可以避免任何外部库，那将是很好的（网站假设也可以在非常低的资源/带宽上工作）。
为one-article div设置一个非常大的高度，或者将抽象大小减少为有限数量的字符。两种选择都有效，但并不是我试图获得的所有选择......

到目前为止我的最佳成绩

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

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

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

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

如果任何对angularJS有更多经验的人有一个想法，或者最糟糕的情况是外部插件（如果可能的话，那么很小）。

谢谢！

Answer 1

改为列出列表并重复这些列表。要填充列表，只需按照计算“列”值的方式执行，这可以使用相对少量的cpu来完成。额外的列表几乎不占用任何内存，因为它们只包含额外的指针，所以这也不是问题。

AngularJs：高度可调的多列

1 个答案: