[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」を含む国名のみ表示されます。

デモのキャプチャ

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

sponsors

top of page

©2018 coliss