css - 带有 Angular Material 的不同高度的md卡的响应网格

这是我的md卡的循环（第一个div除外）：

<div layout="column" layout-gt-sm="row" layout-wrap="">
    <div flex="25" flex-gt-sm="50">
        <md-card>
            <md-card-header>
                <md-card-avatar><img src="#" />
                </md-card-avatar>
                <md-card-header-text>
                    <span class="md-title">Angular</span>
                    <span class="md-subhead">Material</span>
                </md-card-header-text>
            </md-card-header>
            <img ng-src="{{imagePath}}" alt="Washed Out" class="md-card-image" />
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Text</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-content>
                <p>
                    Content
                </p>
            </md-card-content>
            <md-button>Button</md-button>
        </md-card>
    </div>
    <!-- another card -->
</div>

效果很好，这是picture。
但是，如果我不想严格在线显示卡怎么办？有什么办法得到像
this？

最佳答案

这种布局将需要您使用一些JavaScript来添加到视图逻辑中。由于您的每张卡都使用行，因此当前无法进行这种样式设置。
我会签出http://masonry.desandro.com/

关于css - 带有 Angular Material 的不同高度的md卡的响应网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37398543/