SummArg | Cursos y recursos para webmasters

10/12/2010

Acomodar elementos en un layout de forma eficiente con jQuery Masonry

jQuery Masonry es un recurso muy interesante para el uso en sites con contenido de texto dividido en varios bloques. Digamos que si la propiedad CSS float acomoda los elementos primero buscando el eje horizontal y luego el vertical, Masonry los acomoda buscando primero el eje vertical y luego el horizontal. De este modo se logra acomodar dejando una menor cantidad de espacios en blanco cuando hay variación de altos.

Masonry también incorpora efectos de animación interesantes para reacomodar los elementos en base a una selección dada (filtering), carga de contenidos “infinita” y mucho mas. Su uso no se limita unicamente a texto, sino a cualquier elemento que sea ubicable dentro de un div (videos, imagenes, links…).

Su uso es bastante sencillo, el script puede cargarse entre etiquetas <head> o antes de la etiqueta </body>

<script src="jquery-1.4.2.min.js"></script>
  <script src="jquery.masonry.min.js"></script>
  <script>
  	$(function(){
  		$('#secondary').masonry({columnWidth: 100});
  	});
  </script>

Con ello todos los divs dentro de <div id=”secondary”> se verán afectados por el script y sus opciones. Pueden ver demos, documentación y descarga en el sitio del autor.



Dejar un comentario