Sample

CODE:
$("#sample1").multicol({colNum:4, colMargin: 10});

或春の日暮です。
唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。
若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。
何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。
しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。
「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」
杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしていたのです。
するとどこからやって来たか、突然彼の前へ足を止めた、片目眇の老人があります。それが夕日の光を浴びて、大きな影を門へ落すと、じっと杜子春の顔を見ながら、
「お前は何を考えているのだ」と、横柄に声をかけました。
「私ですか。私は今夜寝る所もないので、どうしたものかと考えているのです」
老人の尋ね方が急でしたから、杜子春はさすがに眼を伏せて、思わず正直な答をしました。
「そうか。それは可哀そうだな」
老人は暫く何事か考えているようでしたが、やがて、往来にさしている夕日の光を指さしながら、
「ではおれが好だから」
「ほんとうですか」
杜子春は驚いて、伏せていた眼を挙が二三匹ひらひら舞っていました。

CODE:(実行)
$("#sample2").multicol({colNum:5, colMargin: 20});

杜子春は一日の内に、洛陽の都でも唯一人という大金持になりました。あの老人の言葉通り、夕日に影を映して見て、その頭に当る所を、夜中にそっと掘って見たら、大きな車にも余る位、黄金が一山出て来たのです。
大金持になった杜子春は、すぐに立派な家えるやら、その贅沢を一々書いていては、いつになってもこの話がおしまいにならない位です。
するとこういう噂面白く奏しているという景色なのです。
しかしいくら大金持でも、御金には際限がありますから、さすがに贅沢家の杜子春も、一年二年と経つ内には、だんだん貧乏になり出しました。そうすると人間は薄情なもので、昨日に一杯の水も、恵んでくれるものはないのです。
そこで彼は或日の夕方、もう一度あの洛陽の西の門の下へ行って、ぼんやり空を眺めながら、途方に暮れて立っていました。するとやはり昔のように、片目眇の老人が、どこからか姿を現して、
「お前は何を考えているのだ」と、声をかけるではありませんか。
杜子春は老人の顔を見ると、恥しそうに下を向いたまま、暫くは返事もしませんでした。が、老人はその日も親切そうに、同じ言葉を繰返しますから、こちらも前と同じように、
「私は今夜寝る所もないので、どうしたものかと考えているのです」と、恐る恐る返事をしました。
「そうか。それは可哀そうだな。ではおれが好いことを一つ教えてやろう。今この夕日の中へ立って、お前の影が地に映ったら、その胸に当る所を、夜中に掘って見るが好い。きっと車に一ぱいの黄金が埋まっている筈だから」
老人はこう言ったと思うと、今度もまた人ごみの中へ、掻き消すように隠れてしまいました。
杜子春はその翌日から、忽ち天下第一の大金持に返りました。と同時に相変らず、仕放題な贅沢をし始めました。庭に咲いている牡丹の花、その中に眠っている白孔雀、それから刀を呑んで見せる、天竺から来た魔法使——すべてが昔の通りなのです。
ですから車に一ぱいにあった、あの夥しい黄金も、又三年ばかり経つ内には、すっかりなくなってしまいました。

CODE:(実行)
英語の場合CSSにてtext-align: justifyをいれておくときれいです。
また、画像を入れていてもある程度補正して高さを揃えます。

$("#sample3").multicol({colNum:3, colMargin: 20});

Lorem ipsum

001

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Show github page

ダウンロード/設置方法:

jQueryをDL : jquery.js
muticol.jsをDL : multicol.min.js

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/multicol.min.js"></script>

EXAMPLE:

jQuery Pluginなので、jQuery Selectorsで指定した要素を段組みにすることができます。

$(document).ready(function(){
	$("selector").multicol({colNum: 3, colMargin: 20});
});

PROPERTY:

colNum (必須)
分割するカラム数を指定します
colMargin
分割したカラムとカラムのマージンをピクセル数で指定します (default: 10)

NOTICE:

文字が途中で切れてしまっている場合は、line-heightと段落や見出しのmarginの関係が等倍でないことが原因です。
これはレイアウトの性質上こうなってしまいます。

またelasticレイアウトではうまく動かない可能性があります。フォントはピクセル指定で制御してください。

selector { line-height: 18px; }
selector p, selector h2, selector h3, selector h4, selector h5, selector h6 {
	margin-bottom: 18px;
}

DEVELOPERS:

GNU General Public Licenseに基づき改変、再配布などは自由に行ってくだささい。

HISTORY:

  • - v1.2 / IE8でのレンダリングを修正, Prototype Javascript Frameworkとのコンフリクト回避
  • - v1.1 / Firefox2でのレンダリングを修正
  • - v1.0 / 公開

(want) TODO:

やりたいこと、やろうとしていることのリストです。

  • - 文字サイズの可変対応 (itsuo様より)
  • - CSS3対応ブラウザには、なるべくネイティブの処理を使用
  • - CSS3からの指定方法も追加
  • - 基準高さの指定を可能にする
  • - リポジトリ作成、公開作りました。
blog comments powered by Disqus