AngularJs: Multiple columns with adjustable height

Question

I am currently transferring a project from jQuery to AngularJS.

I receive "articles" from a server in JSON format with title, authors, date and abstract. I display them as divs the following way:

<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>

Because I use Bootstrap col-sm-4, I have 3 columns in wide screen. This looks really good.

My problem:

I now want to include the article abstract, and its length can vary from nothing to a few (<100) words. For this reason, the display looks weird. I would like to find an elegant solution to have different height for each div so that the whole display is optimized, without any blank holes in between lines of three articles.

What I tried

• While using jQuery, I went for Masonry javascript library. Worked OK but my angularjs skills are still limited and I didn't manage to transfer. Also, if I could avoid any external library, that would be great (Website is suppose to also work on very low resources/bandwidth).
• Put a very large height for the one-article div, or cut down the abstract size to a finite number of characters. Both options work but are not AT ALL what I try to obtain...

My best result so far

When receiving an article from the website, define a column number and then use a filter in angularJS:

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

While this work, I don't find it very "elegant" because

• I have to recalculate all the columns number every time one article is removed by the user
• I can't use a global orderBy filter
• I have to repeat the code in the view 3 times...

If anyone with more experience in angularJS has an idea, or worst case scenario an external plugin (but small if possible).

Thanks!

Answer 1

Make a list of lists instead and repeat over those lists. To fill the lists just do it the same way you calculated the "column" values, that can be done with a relatively small amount of cpu. The extra lists will barely take any memory at all since they only contain extra pointers, so that is not an issue either.