ウィンドウサイズに合わせてレイアウトがアニメーションしながら可変する［Masonry］は、言わずと知れた超有名 jQuery プラグインです。
「Masonry」とは直訳すると「石造建築」の意味。レンガ造りの壁をイメージすると、その特性が理解しやすいかもしれません。
ちなみに読み方は「メーソンリー」です。「フリーメーソン」の語源にもなっていますね。
百聞は一見に如かず、というワケで、まずはデモをご覧ください。
jQuery Masonry : サンプル・デモ
jQuery Masonryの使い方
まずは jQuery 本体のライブラリと jQuery Masonry をダウンロードしてきます。
当然ですが jQuery の本体ライブラリがないと動きませんので、Masonry プラグイン単体では意味がありません。
ダウンロードしてきた２つのファイルは head タグ内で読み込むようにします。
例：
<head> <script src="jquery.js"></script> <script src="jquery.masonry.min.js"></script> </head>
続けてスクリプトの設定処理を記述します。
<script>
$(function(){
$('#masonry').masonry({
itemSelector: '.grid',
isFitWidth: true,
isAnimated: true
});
});
</script>
HTML の記述方法は以下のとおり。
今回は［id=”masonry”］という親要素のボックス内に配置した［class=”grid”］という要素をアニメーション処理させる、という前提での記述です。
<div id="masonry"> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> </div>
あとはCSS側で適当な大きさにボックスを整形すれば、これだけで Masonry が起動。ウィンドウサイズに合わせて［class=”grid”］で指定した要素が並び替えられるのを確認できるはずです。
#masonry {
width:100%;
padding:10px;
border:1px solid #EEE;
overflow:auto;
}
.grid {
width:220px;
margin:5px;
padding:10px;
float:left;
background:#424242;
color:#fff;
display:inline;
}
オプション
- itemSelector
- 整列対象のclass名を指定する。’.grid’と記述すれば「grid」が整列対象になる。
- isAnimated
- ウインドウサイズを変更したときにブラウザの幅に合わせて移動するアニメーションが実行される。trueまたはfalseを指定する。
- isFitWidth
- 全体を中央に寄せる。trueまたはfalseを指定する。これとは別に、cssで基本となるボックス（grid）を囲むdiv（center）にセンタリングさせる記述をする必要がある。
- isRTL
- 右上から左下に向かって並べたい場合に指定する。trueまたはfalseを指定する。
- columnWidth
- 一列の幅サイズを指定する。これを使わずcssで指定することもできる。
- isFitWidth
- 親要素の幅サイズがピッタリになる。trueまたはfalseを指定する。
- gutterWidth
- 整理される要素間の溝の幅を指定する。数値を指定する。
- containerStyle
- 親要素にスタイルを追加できる。
- isResizable
- ウィンドウサイズが変更された時に並び替えするかしないか。trueまたはfalseを指定する。
- animationOptions
- アニメーションオプションを指定する。
オプションも豊富に用意されており、比較的簡単にカスタマイズ可能です。
jQuery Masonry : サンプル・デモ
