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

Question

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

我有一堆 div，它们是应用了布局行的容器的子级。每个子项都设置了宽度\高度，并有一个用于展开\折叠的切换按钮，它在展开时只会将它们的大小翻倍，然后在折叠时恢复到原始大小。

我希望子项目重新排序以填充已扩展的其他项目周围的可用空间（前提是空间足够大）。

现在，我的子项的容器元素也应用了 layout-wrap，因此当然随着项的展开，任何不适合水平放置的子项只需向下推到前一个项的下方。

我遇到过 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'}}"。 默认情况下，所有内容都是动画的，但您可以使用 angular-animate 滚动自己的动画。

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