This time I will share jQuery Plugin and tutorial about Small Responsive Masonry Grid In jQuery, hope it will help you in programming stack.
Masonry Grid is a tiny and responsive jQuery grid layout plugin that places elements of varying heights in a column-based fluid grid as you’ve seen on Pinterest.com.
See Also:
How to use it:
1. Add as many grid items to the masonry layout.
1 |
<div class="my-masonry-grid"> |
2 |
<div class="my-masonry-grid-item" style="height: 300px;">1</div> |
3 |
<div class="my-masonry-grid-item" style="height: 380px;">2</div> |
4 |
<div class="my-masonry-grid-item" style="height: 320px;">3</div> |
5 |
<div class="my-masonry-grid-item" style="height: 340px;">4</div> |
6 |
<div class="my-masonry-grid-item" style="height: 320px;">5</div> |
2. Load the main JavaScript file jquery.masonryGrid.js after loading jQuery library.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/dist/jquery.masonryGrid.js"></script> |
3. Initialize the masonry grid and specify the number of columns to generate. Default: 3.
2 |
$('.my-masonry-grid').masonryGrid({ |
4. Determine the screen size at which breakpoint the grid items will be stretched into full width. Default: ‘767’
2 |
$('.my-masonry-grid').masonryGrid({ |
Changelog:
2021-02-19
- Update jquery.masonryGrid.js
