I aim to creator.

最近ではスマートフォン端末もよく利用される様になってから、
Web業界でもレスポンシブルデザインを取り入れるサイトが増えて来ました。

そして最近では可変グリッドレイアウトと言うカードを並べた様な形のデザインも増えています。



そこで、簡単にグリッドレイアウトを使える様にしたjQueryを紹介したいと思います。



必要な物はライブラリーだけ!!



以下のサイトから2つのJavaScriptファイルをダウンロードして下さい。

1. jQuery
2. jQuery Masonry

ダウンロードが完了したらこれで準備は完了です。

後はソースを入力していくだけ、



JavaScriptファイル読み込み

jQueryコードを書く

$(function(){
  $('#main_container').masonry({
     itemSelector: '.box',
     isFitWidth: true,
     isAnimated: true
  });
});

※
[$('#main_container')]ではHTMLのグリッドレイアウトのボックス全体を囲む要素です。
[itemSelector: '.box',]レイアウトする対象要素

HTMLを書く

    
        

            


Box1



Box2



Box3



Box4



Box5



Box6



Box7



Box8



Box9

CSSをお忘れなく!!

            body{ background-color: #808080; }
            #main_container{ margin: 0 auto; width: 900px; }
            .box{
                background-color: #fff;
                float: left;
                width: 200px;
                margin: 10px;
                padding: 10px;
                border-radius: 5px;
            }