EDITO: ES JAVASCRIPT, NO CSS "Sobre alineación de divs con javascript"
Hola a todos! Llevo dos dias intentando hacer un script que haga lo siguiente con divs en css (cada color representa un div distinto):
Se podría pensar que se puede hacer con css facil, haciendo 4 columnas relative con el mismo float y asi mismo dentro de cada una 2 divs con relative y float, la cuestión es que el contenido es dinámico (de una base de datos), hay por cada "contenido" un div distinto y puede ser, como en el caso de la imagen, 8 (4*2) o 10 o 1 o 1209381...
He intentado hacer un script, como decia antes, que midiera la columna mas pequeña y el div lo insertara en dicha columna, luego volviera a medir las columnas y la siguiente columna mas pequeña se insertara el siguiente div... asi queda ordenado de izquierda a derecha y de menor columna a mayor, para ver un ejemplo...
http://pinterest.com/ me podrian decir si hay un script por ahi que haga esto?
Pongo el codigo que llevo de momento (Lo primero es para ver cuantas columnas por pantalla caben)...
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
div.caca {
position: relative;
float: left;
border: 1px solid #ADADAD;
width: 200px;
}
div.columna {
min-height: 20px;
position: relative;
float: left;
border: 1px solid #FF0000;
width: 210px;
}
span {
min-width: 190px;
border: 1px solid #FFF030;
width: 210px;
}
</style>
<script>
function generica() {
for (i=0; i<=10; i++) {
elecolumna = document.getElementById('fiel');
columna = document.createElement('div');
columna.className = 'columna';
//creamos una variable de numero de columna, asignamos id y creamos el child
columna.id = 'columna'+i;
elecolumna.appendChild(columna);
//creo el span
elespan = document.getElementById('columna'+i);
span = document.createElement('span');
span.id = 'span'+i;
elespan.appendChild(span);
//miro el top de la columna
quealto = document.getElementById('columna'+i).offsetTop;
if (quealto > 10){
//borro el ultimo nodo columna que se pasa
fcolumna = document.getElementById('fiel');
fcolumna.removeChild(document.getElementById('columna'+i));
//creo una variable que contendra el numero de columnas totales
var columnas_totales = i;
//ejecuto la funcion mostrar y salgo del for
//maximo que se va a cargar, como se increme
variable = 1;
mostrar(columnas_totales, variable);
break;
}
}
}
//funcion que analiza cual es mas pequeño
function sortNumber(a,b)
{
return a - b;
}
function repetir(columnas_totales, variable, span_minimo) {
//inicializamos jquery
$(document).ready(inicializarEventos);
function inicializarEventos()
{
//hacemos el request
$("#"+span_minimo).load("ajax.php", {name: variable}, function(){});
// para seguir el script se habra tenido que cargar el jquery de la fila de arriba
$("#"+span_minimo).ajaxComplete(function(event,request, settings){
//llamamos a repetir para que vuelva a hacer las cosas
variable = variable + 1;
mostrar (columnas_totales, variable);
});
}
}
//funcion PRINCIPAL que ejecuta el orden
function mostrar (columnas_totales, variable) {
//miramos cual es la columna mas pequeña
var matriz = new Array();
//restamos 1 a columnas totales ya que si son 6 lo logico seria que de 0 a 5 fueran 6
columnas_totales2 = columnas_totales-1;
for (n=0; n<=columnas_totales2; n++) {
que2 = document.getElementById('columna'+n).offsetHeight;
matriz[n] = que2;
}
//calculamos el TAMAÑO de la columna mas pequeña
matriz_min = matriz.sort(sortNumber);
matriz_min = matriz_min[0];
//Vemos a que COLUMNA corresponde ese tamaño anteriormente calculado
for (o=0; o<=columnas_totales2; o++) {
que3 = document.getElementById('columna'+o).offsetHeight;
if (que3 == matriz_min) {
//columna a la cual se asigna
span_minimo = 'columna'+o;
break;
}
}
repetir(columnas_totales, variable, span_minimo);
}
</script>
</head>
<body onload="generica();">
<div id="fiel">
</div>
</body>
</html>
Nota: falta un for por cada div que quiera meter, para que realice la funcion en todos, el codigo esta incompleto