[JS]パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry<textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#wrapper').masonry({ columnWidth: 200 }); }); </textarea>
jQuery Masonry › Basic Examples
These examples demonstrate the basic effect of jQuery Masonry. $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); itemSelector is specified to rearrange all box elements, including the ones inside another div. <div id="primary" class="wrap"> <div class="box col2">...</div> <div class="box col1">...</div> <div class="box col1">...</div> <div class="box col3">...</div> <div> <div c
David DeSandro: jQuery Masonry
Masonry is a layout plugin for the ever-popular Javascript library jQuery. Download jQuery Masonry Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Invoking Masonry only
jQuery Masonry › Basic Examples
These examples demonstrate the basic effect of jQuery Masonry. $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); itemSelector is specified to rearrange all box elements, including the ones inside another div. <div id="primary" class="wrap"> <div class="box col2">...</div> <div class="box col1">...</div> <div class="box col1">...</div> <div class="box col3">...</div> <div> <div c
David DeSandro: jQuery Masonry
Masonry is a layout plugin for the ever-popular Javascript library jQuery. Download jQuery Masonry Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Invoking Masonry only
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
