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ライセンス

• Tag
• jQuery