Blog


25
agosto
- 2012 -
Pedro Villena Fernández

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!

jQuery Masonry: columnas como en Pinterest fue posteado el agosto 25, 2012 a las 19:09 en CSS, Javascript y. fue modificado el agosto 25, 2012 at 19:09. Puedes seguir cualquier respuesta a esta entrada a través de la RSS 2.0 feed. Puedes dejar una respuesta o hacer un trackback desde tu web.

Compartir: Twitter, Facebook, Delicious, Digg, Reddit

|

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 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=""> <strike> <strong>