前の記事 ≪:2009年12月8日 管理人のブックマーク
次の記事 ≫:注目を集めるためのCSS3を使った光るボタンサンプル実装例

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い

2009年12月09日-はてなブックマーク

スポンサード リンク

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。
普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。



が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。
↓↓↓↓↓↓↓↓↓↓



これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。

$('#primary').masonry({
    columnWidth: 100,
    itemSelector: '.box'
});

この仕組みを使ってブログ等を表示するともっと面白いことになります。



新聞っぽくなりましたね。
ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。

以下のエントリを参照してください。
jQuery Masonry ? Basic Examples

関連の記事検索:jQuery, JavaScript, Webデザイン, デザイン, Web制作, UI
スポンサード リンク

By.KJ : 2009年12月09日 08:57 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)