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.
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>
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!
<< Post Anterior | Post Siguiente >>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.
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
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)