Question

过去，我使用此脚本将同一类的所有div设置为最高div的高度。

equalheight = function(container){
    var currentTallest = 0,
         currentRowStart = 0,
         rowDivs = new Array(),
         $el,
         topPosition = 0;
     $(container).each(function() {

       $el = $(this);
       $($el).height('auto')
       topPostion = $el.position().top;

       if (currentRowStart != topPostion) {
         for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
           rowDivs[currentDiv].attr("style", "height: " + currentTallest + "px !important;");
         }
         rowDivs.length = 0; // empty the array
         currentRowStart = topPostion;
         currentTallest = $el.height();
         rowDivs.push($el);
       } else {
         rowDivs.push($el);
         currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
      }
       for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
         rowDivs[currentDiv].attr("style", "height: " + currentTallest + "px !important;");
       }
     });
    }
$(document).ready(function() {  
    equalheight('.divs_to_match');              
});

但是，这一次，我试图选择SHORTEST div，然后将其他的最大高度设置为匹配，以便将div裁剪为相同的高度。有人可以帮我修改一下吗？

编辑 - 这是一个显示当前工作原理的jsfiddle - https://jsfiddle.net/mortalwombat7/h61oc67x/11/

Answer 1

以下是有效的代码：

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].attr("style", "max-height: " + currentTallest + "px !important; overflow: hidden;");
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest > $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].attr("style", "max-height: " + currentTallest + "px !important; overflow: hidden;");
   }
 });
}

$(window).ready(function() {
  equalheight('.main article');
});


$(window).resize(function(){
  equalheight('.main article');
});

Answer 2

//min and max functions -- from MDN
function minHeight(arr) {
    return Math.min.apply(null, arr);
}

//in case you want max at a later date
function maxHeight(arr) {
    return Math.max.apply(null, arr);
}

var equalHeights = function(elements){
    var tracker = [],
    min = 0;
    //max = 0; -- you'd replace min with max if you want the opposite

    elements.each(function(){
        tracker.push(Math.floor($(this).height()));
    });

    min = minHeight(tracker);
    max = maxHeight(tracker);
    elements.each(function(){
        $(this).height(min);
    });
};

var min = equalHeights($('.main article'));

挑选div的最短高度

2 个答案: