可変グリッドプラグインjQuery masonryの設定方法・オプションまとめ
CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。
そこで役立つ便利なプラグインjQuery masonryをまとめてみました。
ちなみにMasonryとは、和訳すると「石造建築」。
レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな？
jQuery masonryの使い方
JSファイルをダウンロード
まずはjQuery本体とjQuery masonry本体をDL。
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
※大事なことなので２回言います。
<script src="jquery.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200 //一列の幅サイズを指定
});
});
</script>
実にシンプルな作りだけど、ウィンドウサイズに合わせて要素が並び変わる動きができた。
jQuery masonry のオプション
オプションを加えると、ぬるっと動いたり色々できてかっこよくなるので、いくつか紹介。
オプション設定
$(function(){
$('#container').masonry({ //親要素のクラスを指定
itemSelector: '.box', //整理される要素のclassを指定
columnWidth: 200, //一列の幅サイズを指定
fitWidth: true, // 親要素の幅サイズが可変する
originLeft: false, // falseで子要素の並びが逆順になる
gutter: 30, // 子要素の間にマージンを設定
containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる
resize: true // ウィンドウサイズが変更された時に並び替え
});
});
itemSelectorオプションは必須。
個人的には、columnWidthとfitWidthを設定しておけば、良い感じになってくれると思うわけです。
まとめ
jQuery masonryの実装方法を紹介してきました。
基本的にソースをコピペで実装できるよう書きましたが如何でしたでしょうか。
レスポンシブデザインに対応しているので、記事一覧ページなどにもおすすめです。
この他にもたくさんオプションが存在しますので、本家サイトを参照してみて下さいね。
