Press "Enter" to skip to content

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.

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 and specify the variety of columns to generate.

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

4. Determine the display screen size at which breakpoint the grid objects shall be stretched into full width.

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

Responsive Masonry Grid, jquery masonry grid Plugin/Github, masonry grid, masonry gallery with lightbox, jquery masonry plugin, jquery image grid, masonry jquery, masonry responsive, masonry image gallery, masonry css


See Demo And Download

Official Website(ny64): Click Here

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

Be First to Comment

    Leave a Reply

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