Easy Masonry Layout Web Component – masonry-layout

Category: Javascript , Layout | September 30, 2023
Author:andreasbm
Views Total:108 views
Official Page:Go to website
Last Update:September 30, 2023
License:MIT

Preview:

Easy Masonry Layout Web Component – masonry-layout

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

You Might Be Interested In:


Leave a Reply