Felica Study Site

Lesson Data Down Load

「Masonry」プラグインについて

javascript jQuery

「Masonry」プラグインについて

説明画像1

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>