Creación de bloques de altura iguales con vanilla JavaScript

Vista prévia

Descripción

Una forma minimalista de crear columnas con igual altura que funciona con múltiples filas y diseño adaptable. Escrito en JavaScript vainilla.

Funcionamiento

Agregue el siguiente fragmento de código JavaScript en el documento. Se establecerá la altura de cada artículo elemento en su cuerpo sección a la altura de la más alta artículo elemento.

function sameHeights () {


var nodeList = document.getElementsByTagName('article');

var elems = [].slice.call(nodeList);


var tallest = Math.max.apply(Math, elems.map(function(elem, index) {


elem.style.minHeight = ''; // clean first


return elem.offsetHeight;

}));


elems.forEach(function(elem, index, arr){


 elem.style.minHeight = tallest + 'px';

});


}

var resized = true;
var timeout = null;

var refresh = function(){

if(resized) {


requestAnimationFrame(sameHeights);

}
	clearTimeout(timeout);
	timeout = setTimeout( refresh, 100);

resized = false;
};

window.addEventListener('resize', function() { resized = true; });

refresh();

También viene con una solución jQuery para implementar la característica de altura igual en sus elementos existentes. Simplemente incluya el siguiente fragmento de código JavaScript después de la biblioteca de jQuery.

function sameHeights () {

var elems = $('article');

elems.css('min-height', Math.max.apply(Math, elems.map(function() {


 return $(this).height();

}).get() ));
}

$('window').on('resize', function() { resized = true; });

refresh();