Paginacion de divs con Javascript

[deywibkiss]

Se que este tema se ha tocado pero no encuentro algo interesante para poder hacer lo que quiero... ningun plugin satisface mis necesidades, asi que les comento:

Quiero hacer un catalogo de productos, en donde cada producto puede estar destacado o no. Cuando un producto es destacado lo vamos a llamar producto estrella.

Si un producto es estrella tendra unas dimensiones alto y ancho superiores a un producto que no es estrella.

Estos productos se van a mostrar en un contenedor de ancho y alto fijos...

Lo que yo necesito es paginar el catalog....

Lo que tengo hasta el momento es:

1. consulto los productos de un negocio y los obtengo en formato json.

2. con un switch defino si se pinta como producto estrella o no.

3. Los productos se pintan sobre una capa id parrilladeproductos+j, donde j es el numero actual de la pagina.

4. Cuando parrilladeproductos+j llega al limite del alto de su contenedor padre, se pagina.


Pero el problema esta en el punto 4, que no termina de pintar el producto a lo ancho y me queda un vacio inmenso....

Graficamente:



El codigo que tengo hasta ahora es el siguiente:

Código Javascript:

function PaginarListaProductos(objson,grandparent){
    $('#'+grandparent).css({height:'22em'});
    //arreglo global de paginas
    var cantidadpaginas = Array();
    var numproducto = 0;
    //se valida el tamaño del contenedor padre, si llego al 100% del ancho de la capa abuelo se pagina
    for(j = 0; j < objson[0].productos.length;j++){
        Nuevodiv('parrillaproductos'+j,'parrproductos','',grandparent);
        $('#parrillaproductos'+j).css('overflow','hidden');
        cantidadpaginas[j] = 'parrillaproductos'+j;
        var productosrestantes = objson[0].productos.length - numproducto;
        for(i = numproducto;i < objson[0].productos.length; i++){
            PintarProductoGold(objson[0].productos[i].producto.idproducto,objson[0].productos[i].producto.nombre,objson[0].productos[i].producto.valor,objson[0].productos[i].producto.estrella,objson[0].productos[i].producto.imagen,'parrillaproductos'+j);
            productosrestantes--;
            //aqui valido el alto de la parrilla y el contenido principal
            if($('#'+grandparent).height() < $('#parrillaproductos'+j).height()+166){
                numnegocio = i+1;
                break;          
            }               
        }
        if(productosrestantes == 0){
            break;
        }
    }
 
//aqui empieza la paginacion....
 
    if(cantidadpaginas.length > 1){
        for(var k = 0; k < cantidadpaginas.length;k++){
            if(k == 0){
                
                $('#'+cantidadpaginas[0]).css('display','block');
                Nuevodivp('adelante','largetitle',"<img src='http://www.yellowcg.com/images/icons/adelante.png' onclick=\"$('#"+cantidadpaginas[1]+"').css('display','block');$('#"+cantidadpaginas[0]+"').css('display','none');\" height='22' style='cursor:pointer'/>",cantidadpaginas[0]);
                
            }
            else if(k == cantidadpaginas.length - 1 ){
                $('#'+cantidadpaginas[k]).css('display','none');
                Nuevodivp('adelante','largetitle',"<img src='http://www.yellowcg.com/images/icons/atras.png' onclick=\"$('#"+cantidadpaginas[k-1]+"').css('display','block');$('#"+cantidadpaginas[k]+"').css('display','none');\" height='22' style='cursor:pointer'/>",cantidadpaginas[k]);
            }
            else{
                $('#'+cantidadpaginas[k]).css('display','none');
                Nuevodivp('atrasadelante','largetitle',"<img src='http://www.yellowcg.com/images/icons/atras.png' onclick=\"$('#"+cantidadpaginas[k-1]+"').css('display','block');$('#"+cantidadpaginas[k]+"').css('display','none');\" height='22' style='cursor:pointer'/><img src='http://www.yellowcg.com/images/icons/adelante.png' onclick=\"$('#"+cantidadpaginas[k+1]+"').css('display','block');$('#"+cantidadpaginas[k]+"').css('display','none');\" height='22' style='cursor:pointer'/>",cantidadpaginas[k]);
            }
        }
    }
}
 

Con lo que tengo no me funciona porque al pintar el primer di de la ultima fila, se pagina de inmediato....

Asi:



Se me ocurre algo con el top, left... pero no estoy seguro de como hacerlo

me echais una mano por favor?