Simple Masonry Layout Plugin For jQuery - indyMasonry
File Size: | 771 KB |
---|---|
Views Total: | 8028 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
indyMasonry is a simple yet customizable jQuery masonry layout plugin to create a flexible cascading grid layout that supports adding new elements dynamically.
See also:
Basic usage:
1. Load the jQuery indyMasonary plugin after loading jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/jquery.indyMasonry.js"></script>
2. The Html structure for the masonry layout.
<section id="indy-masonry-container" class="indy-masonry-container"> <figure class="indy-masonry"> <img src="img/1.jpg" alt=""> </figure> <figure class="indy-masonry"> <img src="img/2.jpg" alt=""> </figure> <figure class="indy-masonry"> <img src="img/3.jpg" alt=""> </figure> <figure class="indy-masonry"> <img src="img/4.jpg" alt=""> </figure> ... </section>
3. Create a button to load more images/content dynamically.
<button id="add"> Load more </button>
4. Call the plugin to active teh masonry layout.
$(window).load(function() { $('#indy-masonry-container').indyMasonry(); });
5. Enable the 'load more' button to add more elements dynamically.
$('#add').on('click', function() { $('#indy-masonry-container').append(html).indyMasonry('_newElement'); });
6. Full plugin options.
$.indyMasonry({ // CSS class for items 'clName' : '.indy-masonry', // space bewteen items 'gap' : 20, // margin-top 'mTop' : 10, // margin-bottom 'mBottom' : 10, // the max number of columns 'column' : 4, });
This awesome jQuery plugin is developed by dennywake. For more Advanced Usages, please check the demo page or visit the official website.