Masonry

Filter and sort magical layouts with Isoptope

Usage

Image 01
Image 02
Image 03
Image 04
Image 05
HTML

Use .grid-item class on the element, and data-filter="{.classname}" on the filter, for example data-filter="{.square-shape}"

JavaScript

<!-- Vendor Javascripts -->
<script src="../assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="../assets/vendor/isotope-layout/dist/isotope.pkgd.min.js"></script>
<script src="../assets/vendor/isotope-packery/packery-mode.pkgd.min.js"></script>

For more Details see Isotope Documentation