Masonry

まずは実装サンプルを確認。ブラウザーの横幅を変更すると画像がぬるーっと動きます(カラム数変更)。

jsのダウンロード

JSファイルをmasonry.pkgd.min.jsimagesloadedからダウンロード。ダウンロードしたファイルは、/js フォルダーに保存し、アップロードしてください。

ファイルの読み込み

/templates/footer.htmlに以下のソースを張り付ける。

<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>

javascriptの記載

/templates/footer.htmlに以下を追記する。

<script>
jQuery(function($){ 
  var container = document.querySelector('.masonry'); 
  imagesLoaded(container, function () {
    var msnry = new Masonry(container, {
      itemSelector: '.item',
    });
  });
});
</script>

cssの記述

.masonry {
    margin: 0 -1%;
    overflow: hidden;
}
.masonry li.item {
    width: 18%;
    list-style: none;
    margin: 1%;
}
.masonry li.item.x2 {
  width: 38%;
}
.masonry li.item.x3 {
  width: 58%;
}
.masonry li img {
    width: 100%;
    height: auto;
}

@media screen and (max-width:1279px){
.masonry li.item {
    width: 23%;
}
.masonry li.item.x2,
.masonry li.item.x3 {
  width: 48%;
}

}
@media screen and (max-width:1025px) {
.masonry li.item {
    width: 31.3333%;
}
.masonry li.item.x2,
.masonry li.item.x3 {
  width: 62.6666%;
}

}
@media screen and (max-width:600px){
.masonry li.item {
    width: 48%;
}
.masonry li.item.x2,
.masonry li.item.x3 {
  width: 98%;
}
}

htmlの記述

<ul class="masonry">
<li class="item"><img src="/images/img/SCT_6430.JPG"></li>
<li class="item"><img src="/images/img/SCT_6499.JPG"></li>
<li class="item"><img src="/images/img/SCT_6530.JPG"></li>
<li class="item"><img src="/images/img/SCT_6569.JPG"></li>
<li class="item x3"><img src="/images/img/SCT_6604.JPG"></li>
<li class="item"><img src="/images/img/SCT_6687.JPG"></li>
<li class="item"><img src="/images/img/SCT_6760.JPG"></li>
<li class="item x2"><img src="/images/img/SCT_6781.JPG"></li>
<li class="item"><img src="/images/img/SCT_6850.JPG"></li>
<li class="item"><img src="/images/img/SCT_6909.JPG"></li>
<li class="item"><img src="/images/img/SCT_6687.JPG"></li>
<li class="item"><img src="/images/img/SCT_6960.JPG"></li>
<li class="item x2"><img src="/images/img/SCT_7050.JPG"></li>
<li class="item"><img src="/images/img/SCT_7191.JPG"></li>
<li class="item"><img src="/images/img/SCT_7249.JPG"></li>
<li class="item"><img src="/images/img/SCT_6687.JPG"></li>
<li class="item"><img src="/images/img/SCT_7371.JPG"></li>
</ul>

参考サイト

https://www.tipdip.jp/tips_posts/production/2268/