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

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

[nink]

多分順番もバラバラになるので、どこからでも読んで良い記事などが一番ベストかな？

[habuakihiro]

素敵！！！

[mapserver2007]

新聞風レイアウト

[denken]

実行時やウィンドウのリサイズ時に周りのboxの高さや幅から自分のleft値とtop値を求めて絶対位置指定する。columnWidthが何の幅なのか、なにが100なのかとかくらい説明を加えてあげたらいいと思う。

[aienstein]

FLASH抜きでボックスを積むレイアウトを考えてもいいかも

[takuya_1st]

これはいい新聞レイアウト

[dbfireball]

使い方を考えるのが楽しそうだな。

[amerio]

このレイアウトはオサレ。

[hirokiea]

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

[ka-wara]

『綺麗にテトリスっぽく整列／新聞っぽくなりましたね』

[inouetakuya]

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

[billy-elliot]

"[webdesign][javascript][jquery][design][ボックス要素をレンガ状に整列][masonry]"

[nantan]

レンガ状に並べる

[daidaiiroda]

ボックス ブロック 要素をレンガ状に綺麗に整列

[takuya5455]

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

[guangda]

レンガ

[tettou77-1]

へぇ、すごいのかどうかよく分からんけどすごい

[www_taca]

これこれー。これやってみたかった！大きさの異なるブロックをきれいに配置

[omocoro-bookmark]

あいつらはこれを使ってたのかーー！！

[ngsw]

これこれ。

[numaroku]

Sugeeeeee

[inarin]

もうjQuery何でもありだなｗ

[koinobori]

新聞みたいなレイアウト可能。おもしろい。

[kiyoshi1211]

これはおもしろい。早速使ってみよう

[masa0x80]

面白い

[hvc-001]

何かに使えそう

[forcutie]

ボックスをFIXさせるライブラリ

[adsty]

高さの違うボックス要素を新聞の紙面のように整列してくれる。

[boyasan]

へぇープラグイン

[runeharst]

新聞っぽく見せる