您可以使用材质Grid-List，它允许自定义col-span并在宽度更改时为更改添加动画效果。
我从站点改编了样本并添加
md-card了内容。确保添加
layout-fill的
md-card。您可以轻松地根据样本的列数调整样本。
http://prepen.io/anon/pen/QypjWY
我还改编了您的5张卡片样本。您需要知道卡片的高度才能使用“网格列表”，但是您可以在小屏幕上轻松达到100％的高度。您可以为行使用比率或固定的CSS高度，然后卡片的工作就是灵活地显示内容。
<md-grid-list ng-app="app" layout-fill flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="5" md-row-height-sm="100%" md-row-height="600px" md-gutter="8px"> <md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index"> <md-card layout-fill>
http://jsfiddle.net/2afaok1n/34/
编辑：
如果要查找某种交错的网格，则必须添加一个库：angular-deckgrid，它仅提供网格布局，内容中的所有内容都是角材料。与角砌体不同，该库没有任何依赖关系。如果您不担心添加jQuery之类的东西，那么您也可以使用角度砌筑。
<div ng-app="app" ng-controller="DeckController" flex layout="column"> <deckgrid flex source="data"> <md-card>
甲板布局的重要部分是CSS配置。这样，您可以配置列数及其宽度。我已经使用了针对角材料
sm断点的媒体查询来切换到单列布局。
.deckgrid::before { content: '4 .column.column-1-4'; font-size: 0; visibility: hidden;}.deckgrid .column { float: left;}.deckgrid .column-1-4 { width: 25%;}.deckgrid .column-1-1 { width: 100%;}@media screen and (max-width: 960px) { .deckgrid::before { content: '1 .column.column-1-1'; }}http://jsfiddle.net/2afaok1n/39/
编辑2：
还有一个不需要jQuery的砌体版本和一个使用它的简单指令：angular-masonry-
directive。这是一个示例，它的工作原理与另一个类似。
http://jsfiddle.net/xjnp97ye/1/
