ブラウザの幅に応じて配置した要素のレイアウトを整列してくれるjQuery「Masonry」の設定方法

2021.12.13｜JavaScript（jQuery）

ホームページの画像をブラウザの幅に応じて画像を整列してくれるグリットデザインは、jQueryライブラリを使うことによって、画像を綺麗に並べることができます。
レスポンシブ・デザイン対応されているjQueryライブラリなのでスマートフォンデバイスで閲覧した際も画像がブラウザに合わせて柔らかく整列してくれます。

ブラウザの幅に応じて配置した要素のレイアウトを整列してくれるjQueryプラグイン「Masonry Plugin」の設定方法を解説します。

ブラウザの幅に応じて配置した要素のレイアウトを整列してくれる設定方法

1.jQueryライブラリをダウンロード

下記からJavaScriptライブラリのダウンロードを行ってください。
masonry.pkgd.min.jsダウンロード

2.html、cssファイルを作成

html、cssファイルを作成します。

htmlファイルに記述

<!-- container -->
<div id="container">

<!-- content -->
<div id="content">

<div class="box col1">
<img src="/sample/013/img/likeit.jpg" width="600" height="600" alt="Webデザイナー" title="Webデザイナー" />
<h1>Masonry</h1>
</div>

<div class="box col2">
<img src="/sample/013/img/fb.png" width="190" height="190" alt="Webデザイナー" title="Webデザイナー" />
</div>

<div class="box col2">
<img src="/sample/013/img/tw.png" width="190" height="190" alt="Webデザイナー" title="Webデザイナー" />
</div>

<div class="box col2">
<img src="/sample/013/img/tw.png" width="190" height="190" alt="Webデザイナー" title="Webデザイナー" />
</div>

<div class="box col2">
<img src="/sample/013/img/gp.png" width="190" height="190" alt="Webデザイナー" title="Webデザイナー" />
</div>

<div class="box col3">
<img src="/sample/013/img/fashion_top.jpg" width="390" height="242" alt="Webデザイナー" title="Webデザイナー" />
</div>

</div>
<!-- content end -->

</div>
<!-- container end -->

cssファイルに記述

#container{
	width:100%;
	margin: 0 auto;
}
.box {
    float: left;
    margin: 5px;
	position: relative;
}
.box img{
	width:100%;
	height:auto;
}
.col1 { 
	width: 590px;height: 590px; 
	background-color:#ff9b94;
}
.col2 {
	width: 190px; 
	height:190px; 
	background-color:#fff;
}
.col3 { 
	width: 390px; 
	height:242px;
}

3.htmlファイル内に記述

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

htmlファイルにJavaScriptの記述

<meta charset="UTF-8">
<title>ブラウザの幅に応じて配置した要素のレイアウトを整列してくれるグリットデザイン「Masonry」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="グリットデザインでブラウザに合わせて整列させてくれる jQuery 「Masonry」のご紹介を致します。">
<meta name="keywords" content="レスポンシブ,グリット,画像,Masonry,ブラウザ">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/013/base.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="/sample/013/jquery.masonry.min.js"></script>
<script>
  $(function(){
    $('#container').masonry({ //親要素のクラスを指定
      itemSelector: '.box', //整理される要素のclassを指定
      columnWidth: 10, //一列の幅サイズを指定
      isAnimated: true, //スムースアニメーション設定
      isFitWidth: true, //親要素の幅サイズがピッタリ
      isRTL: false,     //整理される要素が左右逆になる（読み言語などに）※デフォルト値：false
      gutterWidth: 0,   //整理される要素間の溝の幅を指定
      containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる
      isResizable: true, //ウィンドウサイズが変更された時に並び替え※デフォルト値：true
    });
    
  });
</script>