「Masonry」プラグインについて
Masonlyプラグインとは
Masonryとは、レスポンシブ対応のグリッドレイアウトを簡単に実装できるJavaScriptライブラリです。
ギャラリーサイトやコーポレートサイトの制作実績などで、使用されているコンテンツを格子状に並べるレイアウトです。
Pinterestサイト等でも活用されています。
masonryプラグインのダウンロード
まずは公式ページからプラグインをダウンロードします。
imageLoadedプラグインのダウンロード
masonryで画像を使用すると画像がダウンロードされる前にプラグインが実行されてしまい、画像が重なったりしてしてしまいます。
このimageLoadedプラグインは全ての画像ダウンロードが完了するまで、他のプラグインを止めておくプラグインです。
公式ページからプラグインをダウンロード
サンプル画像のダウンロードと加工
masonryプラグインを作成するためにまずは画像を加工します。
画像をダウンロードして指定サイズに加工します。
- 200×400を4枚
- 200×300を4枚
- 200×200を4枚
- 200×100を4枚
コードの記述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script>
//コンテナを指定
$(`.container`).imagesLoaded(function(){
$('.container').masonry({
// options
itemSelector: '.box', //コンテンツを指定
columnWidth:210, //カラム幅を設定
fitWidth:true //コンテンツ数に合わせ親の幅を自動調整
});
});
</script>