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

小编典典

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

angularjs

我正在尝试创建一个行为似Bootstrap网格的Angular-
Material卡网格。理想情况下，对于较小的屏幕宽度，卡将为全宽，并在较大的断点处跳至两列。

问题是AM为每个卡创建了列。我还没有弄清楚如何为每个断点指定列数。

这是我使用的标记的基础，该标记在第一个断点处将卡片布局从行到列：

<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
  <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card>

在SO上已经有一个类似的问题，但是被接受的答案并不令人满意，因为它使用了自定义CSS，并且卡的宽度也不宽。我没有找到其他类似的例子。

我想我可以每两张卡片用Angular循环并创建堆叠的集合，但这似乎不必要。我必须认为Material提供了更好的解决方案。同样，这样的解决方案会在卡片高度不同的页面中留下空白。材料似乎适合于砌体状的柔性布局，我想坚持下去。

谢谢。

阅读 209

2020-07-04

共1个答案

小编典典

您可以使用材质Grid-List，它允许自定义col-span并在宽度更改时为更改添加动画效果。

我从站点改编了样本并添加md-card了内容。确保添加layout-fill的md-card。您可以轻松地根据样本的列数调整样本。

http://codepen.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 class="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/

2020-07-04