使用角度材质创建一个类似砖石的md-grid-list

Question

我正在尝试以砖石风格实现md-grid-list，但我似乎不得不决定我想要多少行来伸展显示。

我想要显示具有不同比率的各种图像(比如pinterest)，这样列与行的比率可能并不总是有效。有没有什么方法可以在材料设计中做到这一点，而不必裁剪图片或拼接它们？

附言:我知道迪桑德罗的砖石工程，我正在寻找一个纯粹的材料设计解决方案。

我重用了这里的代码：https://material.angularjs.org/#/demo/material.components.gridList

谢谢

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。在手机上有一列，在平板电脑上有两个等宽的列，在更大的屏幕上有多个等高的行。

我通过从预先定义的集合中找到最接近的宽高比来计算瓷砖的比例。一些裁剪总是出现，但它是相当小的。也可以跳过整个比率问题，通过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;
        }
    };