jQuery
【jQuery】jQueryのMasonryプラグインindyMasonry
August 13, 2016

indyMasonryはタイル状に並べるMasonryを実装するjQueryプラグイン。
<script src="/path/to/jquery.indyMasonry.js"></script>
<section 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> ... </section>
$(window).on('load', function() { $('indy-masonry-container').indyMasonry({ 'column' : 4, /// column count, default = 4 'gap' : 20, /// column gap, default = 20 'mTop' : 10, /// margin-top, default = 10 'mBottom' : 10, /// margin-bottom, default = 10 }); });
$('indy-masonry-container').indyMasonry('_newElement');
MITライセンス