Blocksit jQuery Dynamic Grid Layout

Te interesa disponer del sistema de visiualización de los bloques al estilo Pinterest? BlocksIt es un plugin jQuery para la creación de diseño dinámico de una página Web. Se las arregla para convertir los elementos HTML en “bloques” y colocarlos en el diseño de la página organizándolo al estilo Pinterest, una de las web más populares hoy en día =). ¿Cómo? Bueno, simplemente específica el número de columnas que desea tener y BlocksIt.js hará el resto por ti pudiendo obtener resultados como el siguiente:

blocklit

Implementar este tipo de Webs con bloques autoajustables al estilo Pinteresc es muy sencillo utilizando el plugin jQuery BlocksIt.

En el <head> de nuestra página deberemos añadir la librería jQuery + la llamada al plugin:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../blocksit.min.js"></script>
<script>
$(document).ready(function() {
    $('#content').BlocksIt({
        numOfCol: 3,
        offsetX: 8,
        offsetY: 8
    });
});
</script>

En este caso estamos definiendo un bloque de contenido dinámico con unos márgenes de 8px y 3 columnas.

Dentro del <body> tendremos el contenedor con los bloques o elementos:

<div id="content">
    <div class="grid">
      <!--YOUR CONTENT BLOCK-->
    </div>
    <div class="grid"> 
       <!--YOUR CONTENT BLOCK--> 
    </div>
    ...
</div>

El contenedor con id=”content” es el elemento padre al cual se le aplicará la función Blocksit para aplicar y dentro de este habrá otros contenedores con class=”grid”, los cuales serán los que se autoajustarán según su altura en las columnas.

Dentro de cada bloque puedes introducir cualquier tipo de contenido HTML: imágenes, video, listas, texto…

Ver ejemplo en funcionamiento

Si te ha servido este tutorial hazte fan de la página de facebook del blog Jose Aguilar o síguenos a través de Twitter.
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 5,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

2 respuestas a “Blocksit jQuery Dynamic Grid Layout”

  1. spencer dice:

    Hola jose, puse en práctica tu galeria; todo está excelente; pero muchas veces sucede que a la primera vista, la imagenes salen montadas. Tengo que actualizar dos veces para que se vean normal. ¿ como puedo corregrlo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.