Create md-grid-list masonry with angular material

Question

I am trying to implement a md-grid-list in a masonry style, but it seems to me that I need to decide how many lines I want to stretch on the screen.

I want to display different images with different ratios (I think pinterest), so the ratio between columns and row may not always work. Is there a way to do this with material design without having to crop the image or stretch them?

PS: I know about Disandro masonry, I'm looking for a solution for clean material design.

I reused the code here: https://material.angularjs.org/#/demo/material.components.gridList

thank

Answer 1

Kuzzmi, . - ( )

1- md-grid-list ,

2- md-rowspan md-colspan . , ( ..), )

<md-grid-list md-cols="1133" md-row-height="1:1">
<md-grid-tile ng-repeat="i in images" md-rowspan="{{i.h}}" md-colspan="{{i.w}}">
  <img ng-src="{{i.src}}"/>
  <md-grid-tile-footer>
    <h3>{{i.title}}</h3>
  </md-grid-tile-footer>
</md-grid-tile>

Answer 2

, lg . 12 "" , md-cols . 1 , ​​ .

, aspectratio . , . image.width/image.height * 12.

CSS

md-grid-tile {
    transition: all 500ms ease-out 100ms;
    overflow: hidden;
    img{
      width: 100%;
      height: auto;
    }
}

:

<md-grid-list
    md-cols="12" md-cols-gt-sm="24" md-cols-gt-lg="72"
    md-row-height="1:1"
    md-gutter="2px" md-gutter-gt-sm="4px" >
        <md-grid-tile ng-repeat="image in images"
            md-rowspan="{{getRowspan(article)}}"
            md-rowspan-gt-lg="{{getRowspan(image,'lg')}}"
            md-colspan="{{getColspan(article)}}"
            md-colspan-gt-lg="{{getColspan(image,'lg')}}"
            class="md-whiteframe-z2" >
                <img ng-src="{{image.src}}" />
                <md-grid-tile-footer>
                    <h3 article-title="image.title"></h3>
                </md-grid-tile-footer>
        </md-grid-tile>
</md-grid-list>

:

    $scope.ratios = [
        3/12,
        6/12,
        9/12,
        12/12,
        15/12,
        18/12,
        21/12
    ]
    $scope.getRowspan = function(image,size){
        switch (size) {
            case 'lg':
                return 12;
            default:
                var ratio = image.meta.height / image.meta.width;
                var i;
                for (i = $scope.ratios.length; i > 0; i--) {
                    var cur = $scope.ratios[i - 1];
                    if (!angular.isDefined($scope.ratios[i - 2]) || ratio > cur) {
                        ratio = cur;
                        break;
                    }
                }
                return ratio * 12;
        }
    };
    $scope.getColspan = function(image,size){
        switch (size) {
            case 'lg':
                var ratio = image.meta.width / image.meta.height;
                var i;
                for (i = 0; i < $scope.ratios.length; i++) {
                    var cur = $scope.ratios[i];
                    if (!angular.isDefined($scope.ratios[i + 1]) || ratio < cur) {
                        ratio = cur;
                        break;
                    }
                }
                return ratio * 12;
            default:
                return 12;
        }
    };