等于缩略图的高度

Question

我thumbnail span3每个Twitter Bootstrap行有3个元素,但<p>文本是可变的,它打破了布局.如何将每个thumbnail缩略图设置为最大缩略图的高度,以便它们正确流动？

<div class="box_line" style="float: left; border: 1px solid red;">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt=""/>
    <div class="caption">
      <h5>Thumbnail label</h5>
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
  </div>
</div>

我还没有找到一个可用的jQuery插件来执行此操作,本主题 中的解决方案对我也不起作用.

Answer 1

尝试这个小提琴:http://jsfiddle.net/PbfpU/2/(我使用了你在评论中链接的脚本)

无论如何,只有在加载了所有缩略图后才能调用该函数,否则可能会得到错误的值.

function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumbnail")); 
});

Answer 2

我知道我已经迟到了,但这里有一个方便的变化,Fabrizio的答案,包装成一个jQuery插件:

(function($) {
    $.fn.uniformHeight = function() {
        var maxHeight   = 0,
            max         = Math.max;

        return this.each(function() {
            maxHeight = max(maxHeight, $(this).height());
        }).height(maxHeight);
    }
})(jQuery);

......并使用它:

$(".thumbnails").find(".thumbnail").uniformHeight();

此外,如果您的缩略图包含图像,请确保在窗口加载事件触发后调用此图像.

Answer 3

CSS解决方案将clear: left;用于应该在行中的第一个缩略图.如果您事先知道连续的缩略图数量,则此方法有效.

我使用以下css类:

ul.thumbnails.per6 > li:nth-child(6n+1) {
  clear: left;
}

HTML看起来像这样:

<ul class="thumbnails per6">
  <li class="span2">
    <div class="thumbnail">...</div>
  </li>
</ul>

请参阅此对浏览器的支持.

Answer 4

我喜欢Tim的回答,这是我的单行版本:

$(".thumbnail").height(Math.max.apply(null, $(".thumbnail").map(function() { return $(this).height(); })));

向Roatin Marth致敬,以获得阵列的最大价值.