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と組み合わせたサンプルなど色々ありますのでそちらも参考になるかと思います。時間があればまた試してみたいです。

関連記事

  1. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  2. Expanding Bar Navigation Concept
  3. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  4. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

  5. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  6. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP