使用角材料创建类似砖石的 md-grid-list

Question

我正在尝试以砖石风格实现 md-grid-list，但我似乎不得不决定我希望显示拉伸多少行。

我想显示具有不同比例的各种图像（想想 pinterest），这样 col 与 row 的比例可能并不总是有效。有没有什么办法可以通过材料设计做到这一点而不必裁剪图片或拉伸它们？

PS：我知道 Disandro 的砌体，我正在寻找纯材料设计解决方案。

我重用了这里的代码：https : //material.angularjs.org/#/demo/material.components.gridList

谢谢

Answer 1

库兹米，你是个天才这样的东西有效（有待改进）

1-您使 md-grid-list 的列数与容器的宽度相同

2- md-rowspan 和 md-colspan 需要具有图像的大小。我确信还有一些需要改进的地方（窗口大小调整等......但这个想法是存在的）

很高兴听到你的想法

<md-grid-list md-cols="1133" md-row-height="1:1">
<md-grid-tile ng-repeat="i in images" md-rowspan="{{i.h}}" md-colspan="{{i.w}}">
  <img ng-src="{{i.src}}"/>
  <md-grid-tile-footer>
    <h3>{{i.title}}</h3>
  </md-grid-tile-footer>
</md-grid-tile>