サイズの違う画像を隙間なく詰めるjQueryプラグイン「Masonry.js」
サイズの違う画像を隙間なく埋めるjQueryプラグインがあったのでメモ。
Masonry.js ダウンロード
https://masonry.desandro.com/
imagesLoadedダウンロード（画像サイズを正しく取得するため）
https://imagesloaded.desandro.com/
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="imagesloaded.pkgd.min.js"></script>
<script src="masonry.pkgd.min.js"></script><div class="grid">
<div class="grid-item"><img src="hoge.jpg"></div>
<div class="grid-item"><img src="hoge.jpg"></div>
<div class="grid-item"><img src="hoge.jpg"></div>
<div class="grid-item"><img src="hoge.jpg"></div>
</div>var $grid = jQuery('.grid').imagesLoaded(function(){
$grid.masonry({
itemSelector: '.grid-item'
});
});
