要素をタイル状に表示する超有名jQueryプラグイン「Masonry」の基本的な使い方
- 投稿日：2016/06/07 ｜最終更新：2016/06/08
- JavaScript/jQuery
- Masonry
様々な高さの要素をタイル状に表示するjQueryプラグインでは、「Masonry」が有名です。
この記事ではMasonryの基本的な使い方を説明します。
Masonryとは
Masonryは、ウィンドウの幅に合わせて要素を敷き詰めて表示するjQueryプラグインです。
アニメーションによる可変グリッド表示を実装でき。レスポンシブデザインにも対応しています。
デモは公式サイトを御覧ください。
ダウンロード
スクリプトは下記URLからダウンロードしてください。
Masonry｜masonry.pkgd.min.js
GitHub｜masonry
利用方法
headタグ内の記述
headタグ内に下記のように記述し、スクリプトを読み込んでください。
<script type="text/javascript" src="jquary.js"></script>
<script type="text/javascript" src="masonry.pkgd.min.js"></script>
<script>
$(function(){
$('#container').masonry({
itemSelector: '.grid',//整理される要素のclassを指定
columnWidth: 200, //一列の幅サイズを指定
isAnimated: true, //スムースアニメーション設定
isFitWidth: true, //親要素の幅サイズがピッタリ
isRTL: false, //整理される要素が左右逆になる（読み言語などに）
gutterWidth: 0, //整理される要素間の溝の幅を指定
containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる
isResizable: true //ウィンドウサイズが変更された時に並び替え
});
});
</script>
各種オプションを設定できます。「itemSelector」は必須項目です。
bodyタグ内の記述
<div id="container">
<div class="grid col1"></div>
<div class="grid col2"></div>
<div class="grid col1"></div>
<div class="grid col4"></div>
</div>
bodyタグ内に並び替えたい要素を記述します。
並び替える要素はheadタグ内の「itemSelector」で設定した要素を指定します。
cssの設定
#container{
border: 1px solid #000;
overflow: hidden;
width: 1000px;
}
.grid{
margin: 5px;
padding: 5px;
background: #efefef;
float: left;
}
.col1 {width: 230px;}
.col2 {width: 480px;}
.col4 {width: 980px;}
並び替える要素には[float: left]を設定しておきましょう。
