JavaScript

レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

jQuery Masonryというプラグインを使えば、ものすごく簡単にサイトのレイアウトを整列させることができます。各ボックスの要素にはfloatを指定する必要があります。それでは以下、簡単な使い方です。

[ads_center]

使い方

まずはjQuery Masonryを以下のページからダウンロードします。

jQuery本体を読み込みます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1')</script>

jQuery Masonryを読み込みます。

<script type="text/javascript" src="jquery.masonry.js"></script>
<script type="text/javascript">
$(function(){
    $('#container').masonry();
});
</script>

ちなみにHTMLは以下のような感じです。

<div id="container">
    <div class="item">サンプル...</div>
    ...
    ...
    ...
</div>

CSSです。

#container {
     background: #ccc;
     padding: 10px;
     overflow: auto;
}
.item {
     float: left;
     padding: 5px;
     width: 200px;
     background: #666;
     margin: 5px;
}

これでブラウザで確認してみると、こんな感じになります。

jquery-masonry 適用

とても簡単です。ちなみにjQuery Masonryを使わないとこんな感じになります。

jquery-masonry 適用外

たったこれだけで綺麗に並べてくれるのでとても便利です。

画像の場合

画像を整列させるには以下のように指定します。

<script type="text/javascript">
$(function(){
    var $container = $('#container');
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box'
        });
    });
});
</script>

HTMLはこんな感じです

<div id="container">
	<div class="box"><img src=... /></div>
        ...
        ...
        ...
</div>

ブラウザで確認するとこんな感じになります。

jquery-masonry 画像

フォトギャラリーなど色々な用途に使う機会がありそうな感じですね。jQuery Masonryのサイトではこの他にもInfinite Scrollと組み合わせたサンプルなど色々ありますのでそちらも参考になるかと思います。時間があればまた試してみたいです。

jQueryの基本的なセレクターを適当に試してみる前のページ

WordPressでウィジェットのアーカイブを一発でドロップダウンにする超簡単な方法次のページ

関連記事

  1. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  2. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

  3. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  4. Parallax Slider with jQuery
  5. notie.js

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

  6. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP