Sobre alineación de divs con css

karlic0s · #1 (**permalink**) 13/01/2011, 15:37

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