I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

I'll be NET BLOG

なにかの役には立つかもしれない。

トップページ > jQuery > 要素をタイル状に表示する超有名jQueryプラグイン「Masonry」の基本的な使い方

要素をタイル状に表示する超有名jQueryプラグイン「Masonry」の基本的な使い方

様々な高さの要素をタイル状に表示するjQueryプラグインでは、「Masonry」が有名です。
この記事ではMasonryの基本的な使い方を説明します。

masonry.jpg

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]を設定しておきましょう。

記事移動

関連記事

jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法

Masonryを利用した時要素が重なるなどうまく並び変えられない場合の「imageLoaded」を利用した対処法

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

日記検索

エントリー検索フォーム
キーワード

Feed

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】