5

我正在尝试以砖石样式实现 md-grid-list，但我似乎不得不决定我希望显示伸展多少行。

我想显示具有不同比例的各种图像（想想 pinterest），这样 col 与 row 的比例可能并不总是有效。有没有什么方法可以用材料设计来做到这一点，而不必裁剪图片或拉伸它们？

PS：我知道Disandro的砖石，我正在寻找一个纯材料设计的解决方案。

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

谢谢

4

2 回答 2

3

库兹米，你是个天才 像这样行得通（有待改进）

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>

于 2015-06-19T12:49:23.020 回答
1

我通过为 lg 视图选择偶数行甚至为小屏幕选择列来做到这一点。我选择 12 作为“偶数”值，然后我使用 md-cols 来处理不同的大小。这在手机上给了我 1 列，在平板电脑上给了我两个等宽的列，在大屏幕上给了我多个等高的行。

我通过从预定义集中找到最接近的纵横比来计算图块的比率。总是会出现一些裁剪，但它非常少。也可以跳过整个比率的事情，只通过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;
        }
    };
于 2015-08-25T07:52:34.007 回答