Responsive And Lightweight Masonry Grid jQuery Plugin

Masonry Grid is a small and responsive jQuery grid layout/mapping plugin that places items of varying heights into a column-based liquid grid as you saw on Pinterest.com.

Must Read: Horizontal Sort Waterfall Layout Component for Vue.js

How to make use of it:

1. Add as many grid objects to the masonry format.

<div class="my-masonry-grid">
  <div class="my-masonry-grid-item" style="height: 300px;">1</div>
  <div class="my-masonry-grid-item" style="height: 380px;">2</div>
  <div class="my-masonry-grid-item" style="height: 320px;">3</div>
  <div class="my-masonry-grid-item" style="height: 340px;">4</div>
  <div class="my-masonry-grid-item" style="height: 320px;">5</div>
  ...
</div>

2. Load the principle JavaScript file jquery.masonryGrid.js after loading the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.masonryGrid.js"></script>

3. Initialize the masonry grid of columns to generate.

$(function(){
  $('.my-masonry-grid').masonryGrid({
    'columns': 5
  });
});

4. Determine the display screen size at which breakpoint the grid.

$(function(){
  $('.my-masonry-grid').masonryGrid({
    'columns': 5,
    'breakpoint': 467
  });
});

See Demo And Download

Official Website(ny64): Click Here

This superior jQuery/javascript plugin is developed by ny64. For extra advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Leave a Reply

Your email address will not be published. Required fields are marked *