Search
  1. jQuery Masonry〔要素を煉瓦を壁に敷き詰めるようにフロートレイアウト〕

jQuery Masonry
要素を煉瓦を壁に敷き詰めるようにフロートレイアウト

2010/11/14

jQuery Masonry

jquery.js、jquery.masonry.js

要素を煉瓦を壁に敷き詰めるようにレイアウトできるjQueryプラグイン。

通常フロートは要素を水平・は垂直に並べるだけですが、このプラグインを使用すると、要素間の垂直の高さを最小限に抑えて、グリッドで要素を水平・垂直に整列させることができます。 無限スクロール(スクロールに応じて要素を読み込む)やフィルタリング(クラスなやハッシュでグループ分け)、要素の追加などいろいろなカスタマイズ方法が掲載されています。

サンプルでは、FlickrやTumblrの新着情報を表示してみました。

例:FlickrのSetを表示

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.masonry.js" ></script>
        <script type="text/javascript">
            $(function(){
                $.ajax({
                    url: "http://api.flickr.com/services/feeds/photoset.gne?set=72157624243408085&nsid=22559849@N06&lang=en-us&format=json",
                    dataType : 'jsonp',
                    jsonp : 'jsoncallback',
                    cache: false,
                    error:function(e){
                        alert(e+"読み込めませんでした");
                    },
                    success : function(data, status){
                        $("<h2>"+data.title+"</h2>").appendTo("#gallery");
                        $.each(data.items, function(i, item){
                            $('<div class="box"><a title="'+item.title+'" href="'+item.link+'" target="_blank"><img src="'+item.media["m"]+'" /></a></div>').appendTo("#gallery");
                        });
                    }
                });
                $('#gallery').masonry({
                  itemSelector: '.box' 
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .box {
                margin: 5px; padding: 5px;
                background: #D8D5D2;
                font-size: 11px;
                float: left;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://desandro.com/resources/jquery-masonry/'>jQuery Masonry</a></p>
            <p>▼FlickrのSetを表示</p>
<!-- CODE -->
<div id="gallery" class="cf"></div>
<!-- / CODE -->
        </div>
    </body>
</html>

例:TumblrのRSSフィードを読み込んで新着情報20件を表示

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.masonry.js" ></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"></script>
        <script type="text/javascript">
            google.load("feeds", "1");
            function initialize(){
                init("http://cocoism.tumblr.com/rss","feed","20"); // cocoism.tumblr.com
            }
            function init(feedurl,obj,feedmax) {
                var feed = new google.feeds.Feed(feedurl);
                feed.setNumEntries(feedmax);
                feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
                feed.load(function(result) {
                    var blogtitle = result.xmlDocument.getElementsByTagName("title")[0].firstChild.nodeValue;
                    var bloglink = result.xmlDocument.getElementsByTagName("link")[0].firstChild.nodeValue;
                    $("#"+obj).append("<h2><a href='"+bloglink+"'>"+blogtitle+"</a></h2>");
                    if (!result.error) {
                        var items = result.xmlDocument.getElementsByTagName("item");
                        for (var i = 0; i < items.length; i++) {
                            // 記事タイトル
                            var title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
                            // 記事リンク
                            var link = items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
                            // 記事内容
                            var description = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
                            if(title==description){
                                $("#"+obj).append("<div class='box'><a href='"+link+"'>"+description+"</a></div>");
                            }else{
                                $("#"+obj).append("<div class='box'><h2><a href='"+link+"'>"+title+"</a></h2>"+description+"</div>");
                            }
                        }
                    }
                });
            }
            google.setOnLoadCallback(initialize);

            $(function(){
                $('#feed').masonry({
                    columnWidth:240,
                     itemSelector: '.box' 
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .box {
                width:240px;
                margin: 5px;
                padding: 5px;
                background: #D8D5D2;
                font-size: 11px;
                float: left;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            word-break: break-all;
            }
            .box h2 {
                margin:0 0 5px 0; padding:0;
                font-size:100%;
            }
            .box img {
                width:240px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://desandro.com/resources/jquery-masonry/'>jQuery Masonry</a></p>
            <p>▼TumblrのRSSフィードを読み込んで新着情報20件を表示</p>
<!-- CODE -->
<div id="feed" class="cf"></div>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop