Light Masonry

Script para crear un layout tipo masonry.

Solo es necesario tener el contenedor junto a sus hijos que se acomodaran en este tipo de layout.

El script formateara todo, agregara y colocara lo necesario para que funcione el layout.

Contenido

• Instalar
• Demo
• CSS
• Parámentros

Instalar

Light Masonry esta disponible en NPM con el nombre de light-masonry, se puede instalar con Yarn o NPM

1yarn add light-masonry

1npm i light-masonry

Demo

Codepen

CSS

• Puedes obtener los estilos directamente del paquete con:

  1@import "light-masonry/css/light-masonry.css";

• O puedes copiarlos de aqui:

  1/* ------------------ light-masonry.css ------------------ */
  2.light-masonry-wrapper {
  3  --gap: 5px;
  4  --gap-between-columns: var(--gap);
  5  --gap-between-items: var(--gap);
  6  display: grid;
  7  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  8  width: 100%;
  9  grid-gap: var(--gap-between-columns);
  10}
  11
  12.light-masonry-column {
  13  display: flex;
  14  flex-direction: column;
  15  justify-content: flex-start;
  16  align-items: center;
  17  width: 100%;
  18}
  19
  20.light-masonry-column .light-masonry-item {
  21  width: 100%;
  22}
  23
  24.light-masonry-column .light-masonry-item:not(:last-child) {
  25  margin-bottom: var(--gap-between-items);
  26}

Aquí hay 3 variables css que podemos manipular:

• —gap El valor de este cambia los espacios tanto entre las filas y las columnas, totalmente parejo.
• —gap-between-columns El valor de este cambia solo los espacios entre cada columna. Eje horizontal
• —gap-between-items El valor de este cambia solo los espacios entre cada item. Eje vertical
• NOTA: Estas variables van en la misma clase que le pasaste al script.

Parámentros

• containerClass [Required] [String] Este parametro recibe la clase del contenedor al que se configurara el script.

  1const container = ".main-container-masonry";

• Options [Optional] [Object] Él parámetro que recibe es un objeto con todas las opciones posibles. Cada que agregues una option esta se actualizara la default.

  1const options = {
  2  defaultColumns: 4,
  3  resizeDelay: 0,
  4  responsive: {
  5    1440: 4,
  6    834: 3,
  7    680: 2,
  8  },
  9  init: (data) => {},
  10  afterBreakpoint: (data) => {},
  11};

  • defaultColumns [Optional] [Number] Este campo sirve para colocar las columnas por default que tendrá el layout dado caso no se pasen medidas responsive o si las medidas responsive dadas ya no se se cumplen

    1const options = {
    2  defaultColumns: 5,
    3};

  • resizeDelay [Optional] [Number] Este campo activa el sistema "debounce" para el evento resize, por default no esta activado, dejando que el callback del resize se execute cada pixel, con el "debounce" le colocas un retardo a este callback, haciendo que este se active despues del tiempo dado en este parametro (tiempo en milisegundos).

    1const options = {
    2  defaultColumns: 5,
    3};

  • responsive [Optional] [Object] Este parámetro sirve para agregar las medidas responsive y las columnas que abra en cada query. Se basa en desktopFirst, es decir, una vez que alcanza la medida este se configura hacia abajo, dando el numero de columnas pasado a esta medida, y cambia una vez alcance la siguiente medida.

    1const options = {
    2  responsive: {
    3    // window.width <= 1440px : 4 columns
    4    1440: 4,
    5    // window.width <= 834px : 3 columns
    6    834: 3,
    7    // window.width <= 680px : 2 columns
    8    680: 2,
    9  },
    10};

  • init [Optional] [function] Retorna el objeto con la información actualmente en ejecución. Se lanza justo después de configurar el script por primera vez.

    1const options = {
    2  init: (data) => {
    3    console.log(data);
    4  },
    5};

  • afterBreakpoint [Optional] [function] Retorna el objeto con la información actualmente en ejecución. Se lanza justo después de cada cambio de breakpoint.

    1const options = {
    2  afterBreakpoint: (data) => {
    3    console.log(data);
    4  },
    5};