在均衡高度的小脚本上将 jquery 转换为 mootools

Question

我有一个小脚本，可以使框的高度相等，我一直在 jQuery 中使用它，我需要将其转换为网站的 mootools。 在此示例中，框将与样式表一起向左浮动三分之一。

<div id="box1" class="equals">content here</div>
<div id="box2" class="equals">content here</div>
<div id="box3" class="equals">content here</div>



       jQuery(document).ready(function(){

var highestCol = Math.max(jQuery('#box1').height(),jQuery('#box2').height(),jQuery('#box3').height());
 jQuery('.equals').height(highestCol);
                        });

Answer 1

可能更好地使其模块化和可重用：

var equalElements = function(els) {
    // make elements equal height to max height of the set.
    els.setStyle("height", Math.max.apply(Math, els.map(function(el) { return el.getSize().y })));
};

equalElements(document.getElements("div.equals"));

http://jsfiddle.net/dimitar/TxtBQ/

Answer 2

window.addEvent('domready', function(){
  var highestCol = Math.max($('box1').getSize().y, $('box2').getSize().y, $('box3').getSize().y);
  $('.equals').setStyle('height', highestCol);
}

Answer 3

有一个插件可以均衡高度/宽度，设置是否应调整为最大/最小元素： http:// jsfiddle.net/oskar/5uQEP/

用法非常简单：

document.getElements('li').equalize({
    dir: 'height',
    mode: 'max'
});

您还可以返回原始值并执行一些动画：

var maxHeight = document.getElements('li').equalize({
    dir: 'height',
    mode: 'max',
    raw: true
});

document.getElements('li').tween('height', maxHeight);