可変グリッドプラグインjQuery masonryの設定方法・オプションまとめ

2012年7月6日 2019年6月3日 WEB , ,

CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。
そこで役立つ便利なプラグインjQuery masonryをまとめてみました。
ちなみにMasonryとは、和訳すると「石造建築
レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな?

jQuery masonryの使い方

JSファイルをダウンロード

まずはjQuery本体とjQuery masonry本体をDL。

jQuery
jQuery masonry

jsファイルを読み込み

headタグ内に、ダウンロードしたJSファイルの読み込みます。

<script src="jquery.js"></script>
<script src="jquery.masonry.min.js"></script>

続けて、/bodyの直前に下記jsを記述します。

<script>
  $(function(){
    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 200 //一列の幅サイズを指定
    });
  });
</script>

HTML

並び変えしたい要素を記述。

<h1>サンプル  シンプル版</h1>
<div id="container" class="centered">
    <div class="box col2">テキストなど</div>
    <div class="box col2">テキストなど</div>
    <div class="box col2">テキストなど</div>
</div>

CSS

各ブロック要素をデザインする。

.centered { 
    margin: 0 auto; 
}
#container{
    border:1px solid #dadada;
}
.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    float: left;
    height: 300px;
}
.col2 { width: 180px; }
.col4 { width: 380px; }

JS

※大事なことなので2回言います。

<script src="jquery.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
  $(function(){
    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 200 //一列の幅サイズを指定
    });
  });
</script>

 

masonry サンプルページ

 

実にシンプルな作りだけど、ウィンドウサイズに合わせて要素が並び変わる動きができた。

jQuery masonry のオプション

オプションを加えると、ぬるっと動いたり色々できてかっこよくなるので、いくつか紹介。

オプション設定

$(function(){
    $('#container').masonry({ //親要素のクラスを指定
      itemSelector: '.box',   //整理される要素のclassを指定
      columnWidth: 200,       //一列の幅サイズを指定
      fitWidth: true,         // 親要素の幅サイズが可変する
      originLeft: false,      // falseで子要素の並びが逆順になる
      gutter: 30,             // 子要素の間にマージンを設定
      containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる
      resize: true            // ウィンドウサイズが変更された時に並び替え
    });
});

itemSelectorオプションは必須。

個人的には、columnWidthfitWidthを設定しておけば、良い感じになってくれると思うわけです。

 

masonry サンプルページ2

 

まとめ

jQuery masonryの実装方法を紹介してきました。
基本的にソースをコピペで実装できるよう書きましたが如何でしたでしょうか。

レスポンシブデザインに対応しているので、記事一覧ページなどにもおすすめです。

この他にもたくさんオプションが存在しますので、本家サイトを参照してみて下さいね。

この記事へのコメント

    お気軽にコメントをどうぞ。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    ウェルスナビで損失?