1 /**
  2  * @name multicol.js
  3  * @fileOverview
  4  * @version 1.1
  5  * @author <a href="mailto:[email protected]">Kotaro Imai</a> @ <a href="http://hokypoky.info">HOKYPOKY.</a>
  6  * @description
  7  * <p>WEBサイトで段組み行うことができるjQuery Plugin</p>
  8  * <p>(c) HOKYPOKY.info Licensed <a href="http://ja.wikipedia.org/wiki/GNU_General_Public_License">GNU General Public License</a>.</p>
  9  */
 10 if (typeof info == "undefined") {
 11 	/**
 12 	 * @namespace
 13 	 * @description
 14 	 * <p>namespace : info</p>
 15 	 */
 16 	var info = {};
 17 }
 18 if (typeof info.hokypoky == "undefined") {
 19 	/**
 20 	 * @namespace
 21 	 * @description
 22 	 * <p>namespace : info.hokypoky</p>
 23 	 */
 24 	info.hokypoky = {};
 25 }
 26 /**
 27  * @class Mutlicol
 28  */
 29 info.hokypoky.Multicol = new function () {
 30 	jQuery.fn.extend({
 31 		/**
 32 		 * @function
 33 		 * @param {Number} colNum カラム数
 34 		 * @param {Number} colMargin カラムの隙間
 35 		 * @return {jQuery}
 36 		 * @example
 37 		 * jQuery("div.multicol").multicol({
 38 		 *	colNum: 3,
 39 		 *	colMargin: 10
 40 		 * })
 41 		 */
 42 		multicol: function (arg) {
 43 			this.each(function(){
 44 				//初期値セット
 45 				var grid = parseInt($(this).css("line-height"));
 46 				var colNum = (arg.colNum ? arg.colNum : 2);
 47 				var colMargin = (arg.colMargin ? arg.colMargin : 10);
 48 				var width = parseInt($(this).width());
 49 				var colWidth = ($(this).width() - colMargin*(colNum-1)) / colNum -0.1;
 50 				//要素が段組みにFITするよう整頓
 51 				$(this)
 52 					//最後の要素のマージンを0にする。
 53 					.find("> *:last")
 54 						.css({marginBottom: 0})
 55 					.end()
 56 					//imgの高さを揃える。
 57 					.find("img")
 58 						.each(function(){
 59 							var remainder = this.height % grid;
 60 							if(remainder!=0){
 61 								remainder = (remainder < grid/2 ? -remainder : grid - remainder);
 62 							}
 63 							$(this).css({ marginBottom: remainder })
 64 						})
 65 					.end()
 66 					//全体の幅を1カラム分に変更
 67 					.css({width: colWidth})
 68 				.end();
 69 				//幅を1カラム分に細くしたときの全体の長さを取得
 70 				var height = parseInt($(this).height());
 71 				//行数整理(カラム数で丁度割り切れるようにする)
 72 				var remainder = (parseInt(height) / parseInt(grid)) % parseInt(colNum);
 73 				if(remainder!=0) height = height + grid*(colNum-remainder);
 74 				//行数整理された後の高さをセット
 75 				$(this)
 76 					.css({
 77 						height: height + "px",
 78 						overflow: "hidden"
 79 					})
 80 					//内容をmulticolInnerで包む
 81 					.wrapInner("<div class='multicolInner'></div>")
 82 				.end();
 83 				//multicolInnerをコピー
 84 				var contentClone =  $(this).html();
 85 				$(this)
 86 					.css({
 87 						//全体の高さをカラム数で分割
 88 						height: height / colNum  + "px",
 89 						//全体の幅を元の幅に戻す
 90 						width: width
 91 					})
 92 					//内容を空にする
 93 					.html("")
 94 				.end();
 95 				//カラムの数だけコピーした内容を詰め込む
 96 				for(var i = 0; i < colNum; i++) {
 97 					var obj = $(contentClone).css({
 98 						//floatで配置
 99 						"float": i != (colNum-1) ? "left": "right",
100 						//"float": i != (colNum-1) ? "left": "right",
101 						//幅を1カラムの幅にセット
102 						width: colWidth,
103 						//margin-topを1カラム分ずつ引く
104 						marginTop: -($(this).height()*i)+"px",
105 						//最後のカラム以外colMarginで隙間を定義する
106 						marginRight: i != (colNum-1) ? colMargin+"px": 0 + "px",
107 						//はみ出る分を隠す
108 						overflow: "hidden"
109 					})
110 					//元の要素に詰める
111 					$(this).append(obj);
112 				}
113 			});
114 			return this;
115 		}
116 	});
117 }