md-grid-list：重新排序项目

Question

我正在使用Angular Material，并且最近一直在查看md-grid-list，以寻求我想要解决的设计要求。

我有一堆div，它们是应用了布局行的容器的子代。每个子项目都设置了宽度\高度，并有一个切换按钮来展开\折叠，在展开时只需将它们的尺寸加倍，然后在折叠时返回到原始尺寸。

我想要的是让子项目重新排序以填充可用空间（假设空间足够大）围绕其他已扩展的项目。

现在，我的子项目的容器元素也应用了布局包装，因此当项目扩展时，任何不适合水平放置的孩子只需按下前一项目下方。

我遇到过md-grid-list但我不太确定这会为我提供我所追求的内容，因为它似乎更适合基于百分比的尺寸 - 或者我错了？

我看过http://masonry.desandro.com/如果您在主页上调整窗口大小，那就是我正在寻找的行为，尽管我不希望高度\宽度动态更新。

单独使用Angular Material组件可以实现此行为吗？

Answer 1

我不确定我是否理解正确，但这正是网格的作用？

您只需设置列数和宽高比。您还可以设置行的高度（以像素为单位）。您可以根据CSS断点进行配置。

<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"
    md-row-height-gt-md="{{height ? '100px' : '1:1'}}" md-row-height="100px"
    md-gutter="12px" md-gutter-gt-sm="8px">

    <md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1">
      <md-grid-tile-footer>
        <h3>#1: (2r x 2c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

    <md-grid-tile class="green">
      <md-grid-tile-footer>
        <h3>#2: (1r x 1c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

如您所见，我添加了一个切换按钮，用于在比率和固定高度之间切换高度：md-row-height-gt-md="{{height ? '100px' : '1:1'}}"。 默认情况下，所有内容都是动画的，但您可以使用角度动画滚动自己的动画。

http://codepen.io/kuhnroyal/pen/QyxOQo