Simple, responsive and lightweight Masonry Grid jQuery Plugin.

Overview

jquery-masonry-grid

Simple, responsive and lightweight Masonry Grid jQuery Plugin.

jquery-masonry-grid GIF

Installation

Add the script before closing the <body> tag (make sure you use the right path):

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Masonry Grid Plugin -->
<script src="js/jquery.masonryGrid.js"></script>

Usage

There is a demo file demo/index.html in the repository you can use as reference. These options are the default options so this usage would be a little redundant.

<script>
    jQuery(document).ready(function($) {
        $('.my-masonry-grid').masonryGrid({
            'columns': 3,
            'breakpoint': 767
        });
    });
</script>
You might also like...

Lightweight and independent Pinterest-like cascading grid layout library

Lightweight and independent Pinterest-like cascading grid layout library

Bricklayer is a Lightweight and Independent Pinterest-like Cascading Grid Layout Library 💎 Simpler than any other cascading grid layout tools. ❄️ Lig

Dec 22, 2022

Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Jan 9, 2023

This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.

This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.

Tic Tac Toe Game This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X a

Mar 4, 2023

Lightweight plugin for easy responsive images replacement

Responsive image replacement Check out the example here. resonsive-img.js is a lightweight plugin for fast, clean and easy responsive image replacemen

Sep 20, 2022

Some ideas for grid to slideshow switch animations using GSAP's Flip plugin.

Some ideas for grid to slideshow switch animations using GSAP's Flip plugin.

Grid to Slideshow Switch Animations Some ideas for grid to slideshow switch animations using GSAP's Flip plugin. Article on Codrops Demo Installation

Jun 22, 2023

jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

Dec 8, 2022

An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon class in an input element.

Font Awesome Browser An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon

May 1, 2021

A jquery plugin that makes images truly responsive, without sacrificing anyone's face. Give it more stars!

A jquery plugin that makes images truly responsive, without sacrificing anyone's face. Give it more stars!

Responsify.js A jquery plugin that makes images truly responsive, without sacrificing anyone's face :D When images are used in a responsive container

Dec 14, 2022

Responsive, CSS3, touch-enabled jQuery Coverflow plugin.

jQuery.Flipster Flipster is a CSS3 3D transform-based jQuery plugin built to replicate the familiar 'cover flow' effect, but also supports a variety o

Dec 28, 2022
Comments
  • How to add multiple breakpoints and columns?

    How to add multiple breakpoints and columns?

    I'd like to change the number of columns at least 3 times along the viewport. For example: 1 column up to max-width 575px / 2 columns from min-width 476px to max-width 767px and 5 columns from min-width 768px. Is there a way to add this via Vanilla Javascript or jQuery?

    opened by jarisgv 0
Owner
Peter Breitzler
Python3 and PHP, - though I too like coding in ANSI C. - But my true passion, - who would have thought, - is writing poems on public record.
Peter Breitzler
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...

Freewall Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nes

Minh Nguyen 1.9k Dec 27, 2022
A javascript plugin to filter elements from a "masonry" grid.

Isolde Isolde is a lightweight, flexible, and responsive javascript plugin allow you to filter elements from a "masonry" grid. Quick start Install Thi

Tristan BOULANGER 24 Oct 13, 2022
Minimalistic portfolio/photography site with masonry grid, page transitions and big images.

Gatsby Starter Portfolio: Emilia Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI.

Cryptob3auty 1 May 20, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.

Grid Auto Fit for Tailwind CSS A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-f

Thirus 80 Dec 28, 2022
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Samson Onna 600 Dec 8, 2022
jQuery plugin that combines the functionality of a grid with that of an accordion.

Grid Accordion - jQuery plugin A responsive and touch-enabled jQuery grid accordion plugin that combines the functionality of a grid with that of an a

null 1 Dec 16, 2022
Script para crear un layout tipo masonry.

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 layo

Lenin Felix 2 Feb 4, 2022
Minimalist dependancy free Masonry layout library

MiniMasonry.js Minimalist dependency free Masonry layout library MiniMasonry is a lightweight dependency free Masonry layout. It will compute elements

Spope 343 Dec 4, 2022
Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the scene

Would you like to support me? react-native-masonry-grid Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the sc

Numan 5 Sep 7, 2022