innerheight - jquery outerheight
Ajuste de alturas iguales para div''s con jQuery (15)
Quiero establecer la misma altura para divs con jQuery. Todos los divs pueden tener diferente cantidad de contenido y diferente altura predeterminada. Aquí hay una muestra de mi diseño html:
<div class="container">
<div class="column">This is<br />the highest<br />column</div>
<div class="column">One line</div>
<div class="column">Two<br />lines</div>
</div>
<div class="container">
<div class="column">One line</div>
<div class="column">Two<br>lines</div>
<div class="column">One line</div>
</div>
Estoy configurando la altura con la siguiente función jQuery:
$(document).ready(function(){
var highestBox = 0;
$(''.container .column'').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$(''.container .column'').height(highestBox);
});
Esto funciona bien pero no en mi caso porque quiero que todas las ''columnas'' sean iguales solo dentro de un ''contenedor''. Esto significa que en el primer contenedor todas las cajas deben ser tan altas como el primer div, pero en el segundo deben ser iguales a la segunda columna.
Entonces la pregunta es: ¿cómo debo modificar mi jQuery para alcanzar esto?
¡Gracias!
¡Mejora importante! (Agregué $ (this) .height (''auto''); antes de medir la altura, deberíamos restablecerlo a automático. Luego, podemos usar esta función para cambiar el tamaño)
function equalheight () {
$(''.cont_for_height'').each(function(){
var highestBox = 0;
$(''.column_height'', this).each(function(){
var htmlString = $( this ).html()
;
$(this).height(''auto'');
if($(this).height() > highestBox)
highestBox = $(this).height();
});
$(''.column_height'',this).height(highestBox);
});
}
Entonces, debajo de la secuencia de comandos jquery para establecer la altura igual a la columna, Math.max calculará la altura de dos divs y toma la altura más alta, ya sea hacia la izquierda o hacia la derecha.
$(document).ready(function() {
var Equalheights = Math.max($(“#left”).height(), $(“#right”).height());
$(“#left”). Equalheights(d);
$(“#right”). Equalheights(d);
});
Highest height will be assigned to both left and right divs
Esta es mi versión de bloques de configuración en la misma altura ... Por ejemplo, tiene un div que contiene divs con el nombre "col"
$(''.col'').parent().each(function() {
var height = 0,
column = $(this).find(''.col'');
column.each(function() {
if ($(this).height() > height) height = $(this).height();
});
column.height(height);
});
Hay un complemento de jQuery para este propósito exacto: https://github.com/dubbs/equal-height
Si quieres que todas las columnas tengan la misma altura, usa:
$(''.columns'').equalHeight();
Si desea agruparlos por su posición superior, por ejemplo. dentro de cada contenedor:
$(''.columns'').equalHeight({ groupByTop: true });
Necesita imágenes cargadas si el contenedor tiene imágenes dentro. Esto funciona para responsive también.
$(document).ready(function () {
equalHeight(''.column'');
});
$(window).resize(function(){equalHeight(''.column'');});
function equalHeight(columnClass){
$(''.eq-height-wrap'').imagesLoaded(function(){
$(''.eq-height-wrap'').each(function(){
var maxHeight = Math.max.apply(null, $(this).find(columnClass).map(function ()
{
return $(this).innerHeight();
}).get());
$(columnClass,this).height(maxHeight);
});
});
}
Necesitas esto:
$(''.container'').each(function(){
var $columns = $(''.column'',this);
var maxHeight = Math.max.apply(Math, $columns.map(function(){
return $(this).height();
}).get());
$columns.height(maxHeight);
});
Explicación
El siguiente fragmento de código construye una matriz de las alturas:
$columns.map(function(){ return $(this).height(); }).get()Math.max.apply( Math, array )encuentra el máximo de elementos de array$columns.height(maxHeight);establece la altura de todas las columnas a la altura máxima.
Puede acceder a cada contenedor separado utilizando la API .parent() .
Me gusta,
var highestBox = 0;
$(''.container .column'').each(function(){
if($(this).parent().height() > highestBox){
highestBox = $(this).height();
}
});
También puede escribir la función de esta manera, lo que ayuda a construir su código una vez para agregar el nombre de la clase o la ID al final.
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = jQuery(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
equalHeight(jQuery("Add your class"));
Responde a tu pregunta específica
Tu código estaba revisando todas las columnas dentro de cualquier contenedor, lo que debes hacer es:
- Bucle a través de cada contenedor
- Obtén las alturas de cada columna dentro de ese contenedor
- Encuentra el mas alto
- Aplique esa altura a cada columna en ese contenedor antes de pasar a la siguiente.
Nota: Trate de proporcionar un ejemplo de su problema, nos permite ayudarlo y entenderlo más fácilmente, puede ver la solución de trabajo de inmediato y fomenta respuestas más rápidas.
Ejemplo rápido (en bruto)
$(document).ready(function(){
// Select and loop the container element of the elements you want to equalise
$(''.container'').each(function(){
// Cache the highest
var highestBox = 0;
// Select and loop the elements you want to equalise
$(''.column'', this).each(function(){
// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// Set the height of all those children to whichever was highest
$(''.column'',this).height(highestBox);
});
});
.container { border 1px solid red; }
.column { border: 1px solid blue; float:left; width: 30%; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="column">This is<br />the highest<br />column</div>
<div class="column">One line</div>
<div class="column">Two<br />lines</div>
</div>
<div class="container">
<div class="column">One line</div>
<div class="column">Two<br>lines</div>
<div class="column">One line</div>
</div>
¡Biblioteca!
Aquí hay una biblioteca que me parece prometedora si desea más controles de ecualización inteligentes.
Responder a la pregunta de Mem
Pregunta : ¿
$(document).ready()si tiene imágenes que deben cargarse que a su vez modifican las alturas de los contenedores?
Igualación de alturas tras carga de imagen.
Si está cargando imágenes, encontrará que esta solución no siempre funciona. Esto se debe a que document.ready se activa lo antes posible , lo que significa que no espera a que se carguen recursos externos (como imágenes).
Cuando sus imágenes finalmente se cargan, pueden distorsionar las alturas de sus contenedores después de que se haya ejecutado el script de ecualización, haciendo que parezca que no funciona demasiado.
Resolución de alturas de igualación con imágenes.
- Vincular a imagen cargando eventos
Esta es la mejor solución (en el momento de la escritura) e implica la vinculación al evento img.load . Todo lo que tienes que hacer es obtener un recuento de la cantidad de img que hay $(''img'').length y luego para cada load , -1 desde esa cuenta hasta que llegues a cero, luego dispara el ecualizador.
La advertencia aquí es que la load no se activa en todos los navegadores si la imagen está en el caché. Mire a su alrededor google / github, debería haber una secuencia de comandos de solución por ahí. Al momento de escribir, encontré waitForImages de Alexander Dickson (no probado, esto no es una aprobación).
- Otra solución más confiable es el evento
window.load. Esto generalmente debería funcionar siempre. Sin embargo, si revisa la window.load , notará que este evento se activa después de que se carguen TODOS los recursos externos. Esto significa que si sus imágenes están cargadas, pero hay algunos javascript en espera de descargar, no se activarán hasta que se complete.
Si carga la mayoría de sus elementos externos de forma asíncrona y es inteligente en minimizar, comprimir y distribuir la carga, es probable que no tenga problemas con este método, sin embargo, un CDN repentinamente lento (ocurre todo el tiempo) podría causar problemas.
En ambos casos, podría adoptar un enfoque tonto y aplicar temporizadores de reserva. Haga que la secuencia de comandos de ecualización se ejecute automáticamente después de unos segundos, en caso de que el evento no se dispare o algo se salga de su control. No es infalible, pero en realidad satisfará al 99% de sus visitantes con este respaldo si ajusta el temporizador correctamente.
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(''.blocks'').each(function() {
$el = $(this);
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
// we just came to a new row. Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
// another div on the current row. Add it to the list and check if it''s taller
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
$(''.blocks'') would be changed to use whatever CSS selector you need to equalize.
<script>
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
});
</script>
$(document).ready(function(){
$(''.container'').each(function(){
var highestBox = 0;
$(this).find(''.column'').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
})
$(this).find(''.column'').height(highestBox);
});
});
<div class(''a'')>
<div class(''.cols-to-eq'')></div>
<div class(''.cols-to-eq'')></div>
<div class(''.cols-to-eq'')></div>
<div class(''.cols-to-eq'')></div>
</div>
<div class(''b'')>
<div class(''.cols-to-eq'')></div>
<div class(''.cols-to-eq'')></div>
<div class(''.cols-to-eq'')></div>
<div class(''.cols-to-eq'')></div>
</div>
var a = [''.a'',''.b''];
a.forEach(function(value) {
var column = 0;
$(value).find(''.cols-to-eq'').each(function(){
if($(this).height() > column){
column = $(this).height();
}
});
$(value).find(''.cols-to-
eq'').attr(''style'',''height:''+column+''px'');
});
// Select and loop the container element of the elements you want to equalise
$(''.equal'').each(function(){
// Cache the highest
var highestBox = 0;
// Select and loop the elements you want to equalise
$(''.col-lg-4'', this).each(function(){
// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// Set the height of all those children to whichever was highest
$(''.col-lg-4'',this).height(highestBox);
});
});
function setEqualHeight(columns) {
var tallestColumn = 0;
columns.each(function(){
var currentHeight = $(this).height();
if(currentHeight > tallestColumn){
tallestColumn = currentHeight;
}
});
columns.height(tallestColumn);
}
=> setEqualHeight($(''.column''));