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Ā 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.