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> 

因爲我用引導col-sm-4，我在寬屏幕3列。這看起來非常好。

我的問題：

我現在要包括的文章摘要，其長度可以從零到幾（< 100）的話會有所不同。出於這個原因，顯示器看起來很奇怪。我希望找到一種優雅的解決方案，以便每個div具有不同的高度，以便整個顯示屏進行優化，三條產品線之間沒有任何空白孔。

我試過

• 雖然使用jQuery，我去砌體JavaScript庫。工作確定，但我的angularjs技能仍然有限，我沒有設法轉移。另外，如果我可以避免使用任何外部庫，那就太好了（網站假設也可以在非常低的資源/帶寬上工作）。
• 爲one-article div放置非常大的高度，或者將抽象大小縮減爲有限數量的字符。這兩個選項工作，但不是在所有我做的嘗試獲得...

我的最好成績至今

當接收到從網站上的一篇文章中，定義的列數，然後使用過濾器在angularJS：

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

雖然這項工作，我不覺得它很 「優雅」，因爲

• 我必須重新計算所有列數每次一文被用戶刪除
• 我不能使用一個全球性的排序依據過濾
• 我要重複的代碼視圖中的3次...

如果有更多的angularJS經驗的人有一個想法，或最壞的情況下一個外部插件（但如果可能，但很小）。

謝謝！

Answer 1

請列出清單，然後重複這些清單。要填充列表，只需按照計算「列」值的方式進行，即可以使用相對較少的cpu來完成。額外的列表幾乎不會佔用任何內存，因爲它們只包含額外的指針，所以這也不是問題。