mootools 选择器_MooTools Equal Heights插件：均衡器

mootools 选择器

Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS -- you need a little help from your JavaScript friends. Well...now you're in luck.

为了页面漂亮，在同一容器内的元素之间保持相等的高度非常重要。 不幸的是，有时CSS不能使列保持相同的高度-您需要JavaScript朋友的一点帮助。 好吧...现在您很幸运。

View Demo 观看演示

MooTools JavaScript (The MooTools JavaScript)

var Equalizer = new Class({
	initialize: function(elements) {
		this.elements = $$(elements);
	},
	equalize: function(hw) {
		if(!hw) { hw = 'height'; }
		var max = 0,
			prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + hw; //ie6 ftl
			offset = 'offset' + hw.capitalize();
		this.elements.each(function(element,i) {
			var calc = element[offset];
			if(calc > max) { max = calc; }
		},this);
		this.elements.each(function(element,i) {
			element.setStyle(prop,max - (element[offset] - element.getStyle(hw).toInt()));
		});
		return max;
	}
});

The first step is cycle through each element to find which is the tallest (or widest -- this plugin accommodates for equal widths as well). Once we know the largest number we can set the min-property for the element to that number while subtracting border and padding. Simple!

第一步是循环遍历每个元素，以找出最高(或最宽-该插件也可容纳相等的宽度)。 一旦知道最大数量，就可以将元素的最小属性设置为该数量，同时减去边框和填充。 简单！

样本用法 (The Sample Usage)

var columnizer = new Equalizer('.sizeMe').equalize('height'); //call .equalize() as often as you want!

Obviously the class is super small. You create one instance, passing elements initially. From that point forward you can simply call the equalize method as many times as you would like. This is especially useful if the contents of a given column changes frequently.

显然，班级太小了。 您创建一个实例，最初传递元素。 从那时起，您可以简单地多次调用equalize方法。 如果给定列的内容频繁更改，这将特别有用。

View Demo 观看演示

Let me know if you see any room for improvement. I think this plugin will be quite useful for many developers.

如果您有任何改进的余地，请告诉我。 我认为该插件对于许多开发人员将非常有用。

翻译自: https://davidwalsh.name/mootools-equal-heights

mootools 选择器