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

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

 
indy masonry

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

  • LATEST
  • RELATED
  • POPULAR