jQuery Masonry: columnas como en Pinterest

25 agosto 2012

Si eres programador web, quizás has tenido la necesidad de programar algo estilo Pinterest: una serie de elementos flotantes a la izquierda que queden perfectamente ajustados, sin dejar ningún espacio en blanco. Sería algo como lo que se muestra en la imagen:

Sin embargo, algo que parece tan fácil de realizar con CSS ( tan sólo son unos div con float:left ) no queda tan bien en la práctica, ya que los elementos no se ajustan y quedan muchos huecos vacíos. Para solucionar este problema vamos a recurrir a un plugin de jQuery llamado Masonry.

Paso 1: Instalando jQuery y Masonry

El primer paso de todos, ya que Masonry depende de jQuery, va a ser realizar la instalación de este (si ya tienes jQuery instalado en tu web puedes saltarte la instalación). Para ello vamos a la página de jQuery y descargamos la última versión (actualmente jquery-1.8.0.min.js).

También bajamos Masonry de su página web (http://masonry.desandro.com/) descargando el archivo jquery.masonry.min.js

Una vez bajados los dos archivos, ponemos el siguiente código en el header de la página que queramos incluir (recuerda que si ya has incluido jQuery, omitir esa línea):

<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.masonry.min.js"></script>

Paso 2: Aplicando Masonry a los elementos flotantes

Para el ejemplo de este post, vamos a aplicar Masonry a la sección de trabajos de consultoría innova: http://www.consultoriainnova.com/trabajos. Como se puede ver en la imagen que hay a continuación, existen muchos espacios en blanco entre los trabajos realizados:

Actualmente los últimos trabajos son unas capas que tienen float:left, estando distribuidas de la siguiente forma:

<div id=”trabajos”>

<div class=”trabajo”>…..</div>
<div class=”trabajo”>…..</div>
<div class=”trabajo”>…..</div>

</div>

Para arreglar estos espacios vacíos, vamos a hacer magia: con unas pocas línea de javascript aplicamos masonry a todos los elementos:

$(document).ready(function(){
	$('#trabajos').masonry();
});

¡Con tan sólo unas líneas conseguimos el resultado deseado!

|
Otros artículos de
Pedro Villena Fernández

2 Comments

henry on 03/17/2013 at 20:59.

hola una consulta como le pongo scroll infito con masonrry el problema es que pongo scroll y no es compatible se deforma pero queiro qeu todo tenga el mimso estilo de masonry

gracias si me pudieras ayudar

Responder

Pedro Villena Fernández

Pedro Villena Fernández on 03/17/2013 at 21:02.

No sé que script estas utilizando para hacer scroll infinito (o si lo has hecho tú), pero deberías volver a hacer la llamada a masonry una vez hayas cargado los nuevos datos (mediante la función de callback de ese script)

Responder

Deja tu comentario

Tranquilo, tu email no será publicado o compartido.
Rellena los campos obligatorios marcados con *

Puedes utilizar etiquetas HTML con sus correspondientes atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


*


Utilizamos cookies propias y de terceros para mejorar nuestros servicios, facilitar su uso y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información en este enlace.
Aceptar