Responsive Draggable Masonry Grid Layout – Absolute Masonry

Absolute Masonry is a lightweight JavaScript library for creating responsive, draggable, Masonry-style grid layouts.  Masonry-style designs. It provides a simple way to organize items in a grid layout that adapts to different screen sizes, with added functionality to rearrange grid elements if needed.

This library lets you build dynamic grid layouts that adjust to different screen sizes. It’s useful for image galleries, portfolio sites, or content-heavy pages that need an organized structure.

How to use it:

1. Download the package and load the main script.

<script src="absolute-masonry.js"></script>

2. Define your grid items in the HTML structure. If you’re enabling draggable functionality, each item must have a unique data-amId attribute:

<div class="cards-wrapper">
  <div class="card" data-amId="1"></div>
  <div class="card" data-amId="2"></div>
  <div class="card" data-amId="3"></div>
  <div class="card" data-amId="4"></div>
  <div class="card" data-amId="5"></div>
  <div class="card" data-amId="6"></div>
  <div class="card" data-amId="7"></div>
  <div class="card" data-amId="8"></div>
  <div class="card" data-amId="9"></div>
  <div class="card" data-amId="10"></div>
  <div class="card" data-amId="11"></div>
  <div class="card" data-amId="12"></div>
</div>

3. Style your grid items in the CSS. Note that all grid items MUST have the same width.

.card {
  width: 300px;
  /* ... */
}

4. Initialize the library.

absoluteMasonry.init({
  // CSS classname of wrapper element
  containerClassName: "myLayout",
  // CSS classname of grid items
  itemClassName: "card",
  // width of grid items 
  itemWidth: 300, 
  // space between grid items
  gapSize: 20, 
  
});

5. To enable draggable functionality, set draggable: true and make sure all grid items have a data-amId attribute. After reordering items, the new positions are stored under absoluteMasonry.itemPositions on the global object.

absoluteMasonry.init({
  draggable: true,
  
});

6. You can then pass a callback function to handle changes in item positions after reordering:

absoluteMasonry.init({
  onItemPositionChange: (newPositions) => console.log(newPositions),
});

How Absolute Masonry Works:

The core functionality of absolute-masonry revolves around calculating the positions of the items and arranging them within a container.

Initialization: When you call absoluteMasonry.init(), the library assigns the provided class names, item width, and gap size to internal variables. It also determines whether items should be draggable. If so, it prepares event listeners for drag events.

Debouncing for Resize Events: The library uses a debouncer to optimize performance when the window is resized. This ensures that the items are repositioned efficiently without unnecessary function calls triggered by frequent resize events.

Sorting Items: The sortItems function calculates the layout of the grid. It determines how many columns fit within the container based on the width of the items and the container’s width. The script then assigns absolute positioning to each item, adjusting their top and left values to create the Masonry layout effect.

Draggable Feature: When draggable is set to true, event listeners for dragging actions are added to each grid item. Once an item is moved, the library updates the internal array of item positions (_amItemPositions). If a callback function is provided via onItemPositionChange, it gets executed with the updated item positions.

Position Calculation: Each item’s new position is calculated by analyzing the available space within the container. This approach ensures that the grid remains consistent even as items are dragged and dropped.

Related Resources:

• 10 Best JavaScript & CSS Responsive Grid Layouts
• 10 Best jQuery/JavaScript Masonry Layout Plugins