如何创建响应式（可变列数）角材料卡网格

如何创建响应式（可变列数）角材料卡网格

您可以使用材质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/