写真など掲載・紹介する際など、ギャラリーサイトで便利な「Masonry.js」。通常のホームページやサイトでは、水平方向のブロックやカードは高さを揃えてレイアウトすることが殆どですが、高さの違う写真などを隙間なく上下左右詰めてぴったり配置することが可能です。
こちらからダウンロード
https://masonry.desandro.com/
ピンク色のボタン「Download masonry.pkgd.min.js」を右クリックして「名前をつけてリンク先を保存」でファイルを保存して下さい。
あと、Masonry.jsを正しく動作させるために、画像のサイズを正しく取得するためのjs「imagesLoaded」が必要となります。
こちらからダウンロード
https://imagesloaded.desandro.com/
少し下に画面スクロールすると、Downloadがありますので「imagesloaded.pkgd.min.js minified」の上で、こちらも右クリック→「名前をつけてリンク先を保存」でファイルを保存。
使用方法
Masonry.jsを動かすには、Jqueryが必須ですので、Masonry.jsを読み込む前にJqueryを必ず読み込んでください。
あと、正しく動作させるために下記のコードを追加します。imagesLoadedで対象の画像サイズを取得してから、Masonry.jsを実行させています。
$(function () {
var $demo = $('.js-demo'); //コンテナとなる要素を指定
$demo.imagesLoaded(function(){ //imagesLoadedで、対象画像サイズが読み込みまれた時点でMasonryの関数を実行
//Masonryの関数↓
$demo.masonry({
itemSelector: '.js-item', //対象コンテンツ
columnWidth: 200, //カラム幅
fitWidth: true, //コンテンツ数に合わせて親の幅を自動に調整
});
});
});.wrap {
width: 100%;
margin: 0 auto;
}
.demo {
margin: 0 auto;
}
.item {
width: 200px;
}
.item img {
width: 100%;
}CSS
<div class="wrap">
<ul class="demo js-demo">
<li class="item js-item"><img src="img/sample1.jpg"></li>
<li class="item js-item"><img src="img/sample2.jpg"></li>
<li class="item js-item"><img src="img/sample3.jpg"></li>
<li class="item js-item"><img src="img/sample4.jpg"></li>
<li class="item js-item"><img src="img/sample5.jpg"></li>
・・・
</ul>
</div>masonry.jsの使い方を解説！Pinterest風グリッドレイアウトを簡単実装！
https://moshashugyo.com/media/masonry
コメント