Masonry
まずは実装サンプルを確認。ブラウザーの横幅を変更すると画像がぬるーっと動きます（カラム数変更）。
jsのダウンロード
JSファイルをmasonry.pkgd.min.js、imagesloadedからダウンロード。ダウンロードしたファイルは、/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>