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:
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…
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
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?
Hola,
No estoy seguro. Quizá es un defecto del plugin. Si pudieramos ver su página quizá podamos ver que ocurre.
Saludos