> >

jQuery获取对象的高度最大值,解决高度引起的布局错乱

前端开发jQueryBootstrap 816

在使用bootstrap的网格的时候会遇到这种情况：当col的高度不一致的时候排列就会变得凌乱，而在实际情况中除了控制容器内容和高度之外用jQuery来控制是一种比较不错的方法。

HTML：

<div class="row">
    <div class="col-md-6">
      Line 1
      Line 2
    </div>
    <div class="col-md-6">
      Line 1<br/>
      Line 2<br/>
      Line 3<br/>
      Line 4<br/>
    </div>
    <div class="col-md-6">
      Line 1
    </div>
    <div class="col-md-6">
      Line 1
      Line 2
    </div>
</div>

jQuery获取col的最大高度

var maxHeight = Math.max.apply(null, $("div.panel").map(function ()
{
    return $(this).height();
}).get());

代码分解（助于理解），等同于上面

var heights = $("div.panel").map(function ()
    {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

批量设置col的高度

取得最大高度值之后再将col的高度统一设置一下就可以了

$(".row .col-md-6").css({"height":maxHeight + "px"});

Post Comment