Masonry


Description: 要素を隙間無く埋め込み、リキッドレイアウトを構築するプラグイン。どのような環境でも時系列を崩すこと無く配列を組むことが可能です。クロスブラウザ対応しています。
Sample: demo
Tutorial: Masonry
License: MIT

Sample

1

ここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入ります

2

ここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入ります

3

ここに3が入りますここに3が入りますここに3が入りますここに3が入りますここに3が入りますここに3が入りますここに3が入りますここに3が入ります

4

ここに4が入りますここに4が入りますここに4が入りますここに4が入りますここに4が入りますここに4が入りますここに4が入りますここに4が入ります

5

ここに5が入りますここに5が入りますここに5が入りますここに5が入りますここに5が入りますここに5が入りますここに5が入ります

6

ここに6が入りますここに6が入りますここに6が入りますここに6が入りますここに6が入りますここに6が入りますここに6が入りますここに6が入りますここに6が入りますここに6が入りますここに6が入りますここに6が入ります

7

ここに7が入りますここに7が入りますここに7が入りますここに7が入りますここに7が入りますここに7が入りますここに7が入りますここに7が入りますここに7が入ります

8

ここに8が入りますここに8が入りますここに8が入りますここに8が入りますここに8が入りますここに8が入りますここに8が入りますここに8が入ります

9

ここに9が入りますここに9が入りますここに9が入りますここに9が入りますここに9が入りますここに9が入りますここに9が入りますここに9が入りますここに9が入りますここに9が入ります

10

ここに10が入りますここに10が入りますここに10が入りますここに10が入ります

Note

	$(function(){
  		$('#secondary').masonry({columnWidth: 100});
  	});

jQueryとプラグインファイルを読み込んで上記のような設定をします。マークアップもシンプルです。

<div id="secondary" class="wrap">
          <div class="box col1">
            <h5>1</h5>
            <p>ここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入りますここに1が入ります</p>
          </div> 

          <div class="box col2">
            <h5>2</h5>
            <p>ここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入りますここに2が入ります</p>
          </div>
</div>

col1やcol2で幅を変更するという感じ。ちゃんとレイアウトが崩れないようにするには文字数の工夫も必要です。

Related snippet :

  • Description: ややニッチな用途です。iPadや、iPhoneのようなタッチデバイス向けのLightbox系プラグイン。縦でも横でも画像幅を自動で最適化してくれます ...
  • Description: 要素にズームすることができます。ネストされた要素にも再ズーム可能。タブレットのようなタッチデバイスでうまく使えそうですね。アニメーションも軽快で楽し ...
  • Description: 画像でもHTMLでも何でもカルーセル化出来るプラグインです。汎用性も高く、導入も手軽、クロスブラウザにも対応しています。また、縦や横など、様々な形式 ...
  • Description: メニュー項目にマウスを合わせるとラインがアニメーションしながら付いてきます。ラインはテキストの長さに応じて自動で調節されますのでテキストメニューに色 ...
  • Description: シンプルなLightbox系プラグインです。汎用的なデザインで使いやすく、カスタマイズもしやすそうです。 Sample: demo ...
  • Description: シンプルなヘルプコンテンツです。クリックすると隠されていたテキストが表示される仕組み。デモでIE8で表示されていませんが、IE6、7では問題ないので ...
  • Description: 背景に指定した画像をギャラリーにするプラグインです。IE6でも問題無し。背景指定なので、スライドショーの上に画像やテキストを自由に配置することも可能 ...