jQuery

【jQuery】jQueryのMasonryプラグインindyMasonry

August 13, 2016
indy masonry

indyMasonryはタイル状に並べるMasonryを実装するjQueryプラグイン。

jQuery

<script src="/path/to/jquery.indyMasonry.js"></script>

HTML

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

jQuery

$(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

    });

});

Add new elements

 $('indy-masonry-container').indyMasonry('_newElement');

MITライセンス