Masonry: la estructura de moda. ¿Cómo construirla?
Hola, ¡bienvenidos a un nuevo post de la escuela espai! Hoy veremos una forma de estructurar webs que se puso de moda hace algunos años y que, a día de hoy, sigue dando bastante de que hablar: el estilo masonry.
¿En qué consiste el estilo masonry?
El estilo masonry consiste en aprovechar los espacios que se crean cuando se combinan cajas con distintas alturas. Provocando así una construcción tipo «bloque de ladrillos» de ahí el nombre masonry. Quizá no me haya explicado bien, pero lo entenderéis perfectamente con las siguientes imágenes:
¿Captáis la idea? Es muy sencilla. Se trata de aprovechar todos los espacios vacíos, adaptándose a las distintas alturas de las cajas. Seguramente habréis reconocido esta estructura porque se popularizó mucho sobre todo a raíz de los blogs creados en Tumblr. A partir de entonces se ha utilizado en millones de webs. Especialmente en aquellas que muestran distintos elementos de portfolio o galerías de imágenes, ya que es una manera fantástica y muy visual de presentar distintos elementos sin desaprovechar espacios en nuestra pantalla.
¿Cómo se construye?
La idea básica es tener en cuenta el height de un elemento e inmediatamente colocar el siguiente después . Si entendemos cómo funcionan los elementos en bloque sabréis que estos no permiten que nada invada su espacio ni horizontal ni verticalmente. Por ello las cajas de una construcción masonry tienen que contar con la propiedad float y además estar en posición absoluta. De lo contrario no se podrían aprovechar los espacios verticales que se crean entre las distintas cajas.
Así que tenemos que tener en cuenta la altura y la anchura de cada bloque y sumárselo a las propiedades top y left del siguiente. Hacer esto de forma manual es complicado. Pero contamos con un potente plugin de jQuery que automatiza esta tarea.
Podemos bajar este plugin en su web oficial: https://masonry.desandro.com/.
Instalarlo es muy sencillo.
Enlazamos el archivo con la etiqueta <script>. Ejemplo:
<script src=»masonry.pkgd.min.js»></script>
O simplemente copiar el siguiente cdn en la etiqueta <head>:
<script src=«https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js»></script>
(No olvidemos enlazar también la librería de jQuery de lo contrario no funcionará, podéis instalarla copiando este otro cdn).
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js»></script>
Ahora sólo nos queda crear la estructura con HTML, darle un par de reglas CSS e iniciarlo con jQuery.
Lo único que necesitamos es crear un contenedor con alguna clase y unas cajas dentro con la propiedad css «float:left«. Eso es todo. Luego tendremos que llamar a estas clases con jQuery como en el siguiente ejemplo:
<script>
$(function(){
$('.grid').masonry({
// options
itemSelector: '.griditem',
columnWidth: 10
});
});
</script>
Podéis leer la documentación de este plugin en su página oficial. Cuenta con numerosas opciones para personalizar las rejillas masonry. Veréis como con pocas líneas de código podréis crear estructuras increíbles y totalmente responsive.