Bootstrap响应式产品网格

Question

我正在构建一个基于AngularJS数据的产品网格，其中包括图片和产品详细信息（文本）。 文本有时会延伸到第二行，引起混乱。

以下是我的代码：

<div class="row">
    <div data-ng-repeat="s in Results">
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
                <div>
                    <img ng-src="{{s.ProductImage}}" class="img-responsive">
                </div>
                <div>
                    {{s.Store}} {{s.Category}} {{s.ProductName}}
                </div>
            </a>
        </div>
        <div class="clearfix visible-xs-block"></div>
    </div>
</div>

这是它的样子： 如何解决使所有

的高度相同？ 我尝试在线寻找解决方案，但我认为我只有50%的进展。请帮忙。

注意：我不想隐藏内容。

- Simcha Khabinsky

---

我认为唯一的选择是创建三个包含列 (col-xs-4)，并在每个列内部进行重复，并根据计数将每个项目拆分到适当的列中。我不知道如何在Angular中实现这一点，所以我只是点了赞该问题。我在我的首选语言中遇到过这个问题多次。 - Kaizen Programmer

我的解决方案不能使高度相等，你需要使用 jquery。在加载完所有项目后，您需要循环遍历它们并将最小高度设置为与最大产品 div 相同。 - Kaizen Programmer

Answer 1

以下是我为那些在未来偶然遇到这个问题的人所做的事情。

Javascript

function ResizeToLargestElement(element) {
    var maxHeight = -1;
    if ($(element).length > 0) {
        $(element).each(function () {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });

        $(element).each(function () {
            $(this).height(maxHeight);
        });
    }
}

没有使用AngularJS

对于那些没有使用AngularJS的人，只需要在数据更改或窗口调整大小时调用 ResizeToLargestElement()。

$(window).resize(function() {
       ResizeToLargestElement('.AutoResizeToLargestElement');
});`

使用AngularJS

想法是在$scope.Results更改或窗口调整大小时调用ResizeToLargestElement()函数。

要知道$scope.Results何时更改很容易，但要知道已绑定到它的元素何时完成渲染则不容易。为此，您需要一个AngularJS指令。

要知道窗口何时调整大小，请使用angular.element($window).on('resize', function () {...});

HTML

<div class="row">
    <div data-ng-repeat="s in Results" data-ng-repeat-finished> <!--ADDED Directive-->
        <div class="col-xs-4">
            <a href="#" class="thumbnail AutoResizeToLargestElement"> <!--ADDED Class-->
                <div>
                    <img ng-src="{{s.ProductImage}}" class="img-responsive">
                </div>
                <div>
                    {{s.Store}} {{s.Category}} {{s.ProductName}}
                </div>
            </a>
        </div>
        <!--REMOVED clearfix-->
    </div>
</div>

MyDirectives.js

angular.module('myApp').directive('ngRepeatFinished', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

mycontroller.js

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
    ResizeToLargestElement(".AutoResizeToLargestElement");
});

angular.element($window).on('resize', function () {   
    ResizeToLargestElement(".AutoResizeToLargestElement");
});

注意：这需要您在AngularJS的依赖列表中包含$window。例如：angular.module('myApp').controller('....', ['...., '$window', ....]);

- Simcha Khabinsky

---

一个非常出色和全面的解决方案，完美地解决了我的问题。非常感谢。 - isherwood

Answer 2

如果您想让每个产品的高度都是动态的，您需要将结果分成几列。然后使用ng-if将正确的项目放入正确的列中。每3个项目将进入同一列。若要将它们设置为不同的列，只需将$index减少1即可得到额外的每列。

<div class="row">
    <div class="col-xs-4">
        <div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="$index%3==0">
            <div>
              <img ng-src="{{s.ProductImage}}" class="img-responsive" />
            </div>
            <div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
          </a>
            <div class="clearfix visible-xs-block"></div>
        </div>
    </div>
    <div class="col-xs-4">
        <div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="($index-1)%3==0">
            <div>
              <img ng-src="{{s.ProductImage}}" class="img-responsive" />
            </div>
            <div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
          </a>
            <div class="clearfix visible-xs-block"></div>
        </div>
    </div>
    <div class="col-xs-4">
        <div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="($index-2)%3==0">
            <div>
              <img ng-src="{{s.ProductImage}}" class="img-responsive" />
            </div>
            <div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
          </a>
            <div class="clearfix visible-xs-block"></div>
        </div>
    </div>
</div>

- Kaizen Programmer

Answer 3

这个问题的最佳解决方案是为每个视口大小添加clearfix类来隐藏div。例如：

大尺寸：我想要6列（大型桌面电脑） 中等尺寸：我想要4列（桌面电脑） 平板电脑：我想要3列 手机：我想要2列

所以我有产品列表：

<?php $count=1; foreach($productList as $product) : ?>
    <div class="item col-xs-6 col-sm-4 col-md-3 col-lg-2">
            Picture and description
    </div><!-- /item -->

    <?php if( ($count%2)==0) {?><div class="clearfix visible-xs-block"></div><?php }?>
    <?php if( ($count%3)==0) {?><div class="clearfix visible-sm-block"></div><?php }?>
    <?php if( ($count%4)==0) {?><div class="clearfix visible-md-block"></div><?php }?>
    <?php if( ($count%6)==0) {?><div class="clearfix visible-lg-block"></div><?php }?>

<?php $count++; endforeach?>

- Leonardo Lima

Answer 4

您可以手动限制

的高度并使用。使用类似以下的代码：

<div class="col-xs-4" style="height:200px; overflow: auto;">Content</div>

或者，您可以始终使用响应式表格（<table class="table table-responsive">）来进行布局。

- Ranveer

---

把以下程序相关内容从英语翻译成中文：仅返回翻译后的文本，不要隐藏内容。抱歉，更新问题。 - Simcha Khabinsky

然后，只需获取具有最大高度的“div”的高度，并将所有高度设置为它。或者使用表格布局。 - Ranveer

获取最大高度 - 已经做到了，但是...你能在浏览器调整大小时调用一个函数吗？ - Simcha Khabinsky

一个 div 的高度不会因为浏览器的调整而改变，对吧？ - Ranveer

可能是这个。我想是 $( window ).resize(function() {...} 让我试试。 - Simcha Khabinsky