Cómo instalar y usar Masonry JS en Oxygen Builder

09/02/2022

En este tutorial vemos cómo cargar y utilizar la librería de JavaScript Masonry JS en nuestro WordPress utilizando el Oxygen Builder.

También veremos cómo hacer que las columnas de nuestros elementos ocupen todo el espacio disponible e incluso cómo hacerlo responsive.

Enlace a la librería y la documentación: Masonry JS

Código para cargar la librería:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Código para iniciarla:

jQuery(function($){
    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-item',
        gutter: 30
    });
})

Y finalmente el CSS para calcular el ancho de las columnas.

Para 3 columnas y 30px de espacio horizontal:

calc((100% - 60px) / 3)

Para 2 columnas:

calc((100% - 30px) / 2)