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.

npm
npm bundle size

Demo

Codepen

CSS

  • Este script necesita algunos styles base:

    /* ------------------ light-masonry.css ------------------ */
    .light-masonry-wrapper {
      --gap: 5px;
      --gap-between-columns: var(--gap);
      --gap-between-items: var(--gap);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      width: 100%;
      grid-gap: var(--gap-between-columns);
    }
    
    .light-masonry-column {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
    }
    
    .light-masonry-column .light-masonry-item {
      width: 100%;
    }
    
    .light-masonry-column .light-masonry-item:not(:last-child) {
      margin-bottom: var(--gap-between-items);
    }

    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.

    const 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.

    const options = {
      defaultColumns: 4,
      responsive: {
        1440: 4,
        834: 3,
        680: 2,
      },
      init: (data) => {},
      afterBreakpoint: (data) => {},
    };
    • 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

      const options = {
        defaultColumns: 5,
      };
    • 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.

      const options = {
        responsive: {
          // window.width <= 1440px : 4 columns
          1440: 4,
          // window.width <= 834px : 3 columns
          834: 3,
          // window.width <= 680px : 2 columns
          680: 2,
        },
      };
    • 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.

      const options = {
        init: (data) => {
          console.log(data);
        },
      };
    • afterBreakpoint [Optional] [function]
      Retorna el objeto con la información actualmente en ejecución.
      Se lanza justo después de cada cambio de breakpoint.

      const options = {
        afterBreakpoint: (data) => {
          console.log(data);
        },
      };

GitHub

View Github