Easy Masonry Layout Web Component – masonry-layout

Preview:

Description:

A lightweight, customizable, easy-to-use web component to generate responsive Masonry layouts with minimal effort. It places elements in optimal positions based on available vertical space, just like bricks in a wall.

The masonry-layout component efficiently redistributes items when the viewport size changes or new elements are added. Designed with a focus on speed and efficiency and has zero dependencies – written in pure vanilla JS.

How to use it:

1. Install and import the masonry-layout web component.

# NPM
$ npm i @appnest/masonry-layout

import "https://unpkg.com/@appnest/masonry-layout?module";

// OR
<script src="https://unpkg.com/@appnest/masonry-layout/umd/masonry-layout.min.js"></script>

2. Add items (images, cards, divs, etc) to the Masonry layout.

<masonry-layout>
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
  ...
</masonry-layout>

3. Available props to customize the Masonry layout.

• cols: number of columns, number or “auto”
• debounce: delay in ms
• gap: space between items
• maxColWidth: max width of each column
• onResize: callback
• onSlotChange: callback

<masonry-layout 
  cols="auto"
  debounce="2000"
  gap="20"
  maxColWidth="200"
  onResize="@function"
  onSlotChange="@function">
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
  ...
</masonry-layout>

4. API methods.

document.querySelector("masonry-layout").layout();
document.querySelector("masonry-layout").scheduleLayout(number);
document.querySelector("masonry-layout").renderCols(colCount)

Changelog:

v2.2.2 (09/30/2023)

• Add support for right to left layouts