Pinterest Style Dynamic Layout jQuery Plugin - Masonry

Pinterest Style Dynamic Layout jQuery Plugin - Masonry
File Size: 46.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Masonry is a Pinterest Style Dynamic Grid Layout jQuery Plugin for modern web & mobile design.

Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Also can be used as a standalone JavaScript library without any 3rd dependencies.

How to use it:

1. Install & download the Masonry via package managers.

# NPM
$ npm install masonry --save

2. Or directly load the main script from a CDN.

<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>

3. Insert your own items to the grid.

<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  ...
</div>

4. Initialize the Masonry as a jQuery plugin (Requires jQuery library).

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
$('.grid').masonry({
  itemSelector: '.grid-item'
});

5. Initialize the Masonry as a vanilla JavaScript plugin.

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
    itemSelector: '.grid-item'
});

6. Possible options to customize the grid layout.

$('.grid').masonry({

  // selector of grid item
  itemSelector: '.grid-item',

  // column width in pixels
  columnWidth: 200,

  // sets item positions in percent values, rather than pixel values
  percentPosition: true,

  // space between grid items
  gutter: 10,

  // horizontal left-to-right order
  horizontalOrder: true,

  // specifies which elements are stamped within the layout
  stamp: '.stamp',

  // fits the available number of columns
  fitWidth: true,

  // the horizontal flow of the layout
  originLeft: false,

  // the vertical flow of the layout
  originTop: false,

  // additianal styles for the container
  containerStyle: null,

  // transition speed
  transitionDuration: '0.2s',

  // staggers item transitions in milliseconds
  stagger: 30,

  // enables/disables window resize events
  resize: false,

  // enables/disables initial layout
  initLayout: false

});

Changelog:

v4.2.2 (2018-07-05)

  • use float values for position

2018-06-07


This awesome jQuery plugin is developed by desandro. For more Advanced Usages, please check the demo page or visit the official website.