[JS]新聞のカラムのようなレイアウトを生成するスクリプト -ezColumns

div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。

ezColumns
デモ

[ad#ad-2]

ezColumnsの実装例

HTML

p要素で実装したパラグラフをdiv要素で内包します。

<div id="groups">
   <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>D - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>E - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>F - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>G - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>H - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
</div>

スクリプト使用前

p要素で実装したパラグラフは、通常下記のようにブラウザで表示されます。

スクリプト無しの表示

スクリプト使用後

ezColumnsを使用すると、新聞のカラムのようなレイアウトを簡単に実現できます。

スクリプト有りの表示

ezColumnsの実装

JavaScript

「jquery.js」と「jquery.ezColumns.js」を外部ファイルとして記述し、下記のスクリプトを記述します。

$("#groups").ezColumns();

CSS

カラム用のスタイルシートを設定します。

#groups {overflow:hidden;} 
.col{float:left; width:20%; padding:5px; background:#C6F; margin-right:10px;}

[ad#ad-2]

ezColumnsのオプション

オプションでは、カラム内に配置されたデータを検索することもできます。

データ選択と検索機能

リスト要素で配置された国名の一覧です。

国名一覧の表示

検索ボックスに「j」を入力すると、瞬時に「j」を含む国名のみ表示されます。

国名一覧の検索結果の表示