网格列表中的动态高度卡显示

Question

我正在使用 angular material 创建我的网站。我想在网格列表中显示我的产品，每个图块都有一个动态高度，这样结果应该像这个页面 https://www.tumblr.com/search/printify.

我尝试做类似

的事情

<div class="md-padding" layout="row" layout-xs="column" layout-wrap>
 <div flex-xs="50" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="n in [0,1,2,3]">
   <md-card md-whiteframe="4" ng-repeat="result in result[n] | limitTo:limit" >
     ......
   </md-card>
  </div>
</div>

它在 4 列显示中工作正常。但是当调整屏幕大小为md并以3列显示时，第4列显示在第1列之下并且非常难看。

我也在Grid-list上试过，但没有线索，请问有人能帮忙吗？

Answer 1

我建议使用 md-grid 列表。我从 Angular Material 网站编辑了 Codepen：http://codepen.io/anon/pen/qZzmpa 并在磁贴中添加了一张卡片。只有：

<md-card>
    <md-card-content>
        Hi I'm a card
    <md-card-content>
<md-card>

在地砖里面，距离很近。

https://material.angularjs.org/latest/demo/gridList

网格列表中的动态高度卡显示

Dynamic Height Card display in Grid-list

angularjs

angular-material