[SOLUCIONADO] libreria para elementos flotantes

djsos · #1 (**permalink**) 28/09/2013, 13:21

Buenas tardes a todos.

Mi problema(uno de ellos) es que tengo una web donde hay muchos divs que siempre tienen el mismo ancho pero que la altura varía. Necesito que vayan rellenando de arriba hacia abajo así que les he puesto la propiedad float:left.

Bueno parece que la cosa va bien hasta que empiezo a observar que en algunas ocasiones dejan unos huecos entre ellos enormes sin rellenar. es decir en vez de auajustarse pues se saltan una "linea" porque el ultimo de los elementos es muy pequeño y puede meter dos etc..

Probadlo vosotros mismos

Código HTML:

Ver original<div id="padre">
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TTEXTO EXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTOTEXTO  TEXTO TEXTTEXTO O TEXTO</div>
<div style="float:left; width:100px;">TEXTEXTO TO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTEXTO TO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO  TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TETO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTOTEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TETEXTO XTTEXTO O TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXO TEXTTEXTO O TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO  TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO </div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;"> TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TETEXTO TEXTO XTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTOTEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
</div>

Acabo de montar el codigo "online" así que no se si funcionará pero es la idea lo que cuenta.

Lei hace ya mucho tiempo sobre una libreria que hacia que todos quedaran perfectamente cuadrados, alguien sabe cual es o si conoce alguna forma de solventarlo para que todo quede bonito bonito.

Gracias y buenas noches!!!!!

djsos · #2 (**permalink**) 28/09/2013, 13:31

Viva el XXX, bueno pues estaba mirando una web de videos X para un cliente y vi como los resultados hacían lo que yo esta buscando, investigue un poco y he descubierto esta librería "Masonry" http://masonry.desandro.com/
Hace lo que necesito lo he probado con código basura y parece que funciona.

Así que gracias a todos por participar.

Un Saludo!!

Panino5001 · #3 (**permalink**) 28/09/2013, 13:59

Te había entendido que querías algo así:

Código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#padre div{ border:1px dashed #000; margin:2px;}
</style>
</head>
<body>
<div id="padre">
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TTEXTO EXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTOTEXTO  TEXTO TEXTTEXTO O TEXTO</div>
<div style="float:left; width:100px;">TEXTEXTO TO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTEXTO TO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO  TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TETO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTOTEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TETEXTO XTTEXTO O TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXO TEXTTEXTO O TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO  TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO </div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;"> TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TETEXTO TEXTO XTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTOTEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
<div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
</div>
<script type="text/javascript">
if (!Array.prototype.forEach){
    Array.prototype.forEach = function(fun){
        if (typeof fun != "function") throw new TypeError();
          for (var i = 0,l=this.length; i < l; i++) {
               if (i in this) fun.call(arguments[1], this[i], i);
          }
          return this;
    }
}
var mx=0;
try{
	var els=Array.prototype.slice.call(document.getElementById('padre').getElementsByTagName('div'));
}catch(e){
	var tmpel=document.getElementById('padre').getElementsByTagName('div'),i=0,l=tmpel.length,els=[];for(;i<l;i++){els[i]=tmpel[i]};
}
els.forEach(function(el){mx=Math.max(el.offsetHeight,mx);});
els.forEach(function(el){el.style.height=mx+'px';});
</script>
</body>
</html>