pinterest風のタイル上に並べるjQueryを作ってみた

pinterestやjQuery Masonry のようにコンテンツをタイル状に並べるレイアウトがありますが、それをjQueryを使って自分で作ってみました。横幅はひとつの値に固定です。

デモ

実行とoption

JSファイルをダウンロードするとプラグイン状にしてあるのでJSファイルを設置すると以下のコードで実行できます。

$(function(){$('外枠のidかclass').bricks();});

またoptionで以下の設定が出来ます。

space：コンテンツ間隔　（デフォルトは5）
type：「line」行ごとに並べる「low」：高さが低い所から配置する（デフォルトはlow）　※後述
time：読み込み時に初期位置から該当位置までのアニメーションする時間。0にするとアニメーションなし（デフォルトは0）
start：配置アニメーションの初期位置。leftTop rightTop centerTopのどれかを指定する（デフォルトはleftTop）　※timeが0だと特に指定する意味が無い
easing：配置アニメーションのイージングの仕方。jquery.easing.jsがない場合はliner or swingのどちらかを入れる（デフォルトはswing）　※timeが0だと特に指定する意味が無い

type

今回はコンテンツの並び方を2種類作ってみました。

line:高さは関係なく行ごとに並ぶ
low:高さが低い列から配置する

最初の「line」は、コンテンツが長いものがあると凄い偏った列が出来ます。
ウインドウサイズが変更されると並び替えるようになっています。またoptionでアニメーション指定もしています。

その他の動作に関係があるHTMLとCSSとJSファイル内容が以下になります。

HTML

<divclass="bricks"><divclass="cluster"><h2>コンテンツ内容1</h2><p><imgsrc="img.gif"width="100%"alt=""></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam distinctio perspiciatis consequatur id quisquam labore molestiae doloribus, architecto error aspernatur natus reiciendis nulla nihil eveniet aperiam, veniam libero placeat repudiandae.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam distinctio perspiciatis consequatur id quisquam labore molestiae doloribus, architecto error aspernatur natus reiciendis nulla nihil eveniet aperiam, veniam libero placeat repudiandae.</p></div><divclass="cluster"><h2>コンテンツ内容2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam distinctio perspiciatis consequatur id quisquam labore molestiae doloribus, architecto error aspernatur natus reiciendis nulla nihil eveniet aperiam, veniam libero placeat repudiandae.</p></div>～～中略～～
</div>

bricksというclassが外枠でその下のclusterというclassの位置を調整してます。

CSS

動作に関係があるCSSは以下の箇所です。

.bricks{position:relative;}.cluster{width:200px;}

外枠にrelativeを指定することで、もし横幅を指定してもそれに沿って配置してくれるようにしています。

JavaScript

(function($){$.fn.bricks=function(options){vardefaults={space:5,type:'low',time:0,start:'leftTop',easing:'swing'};varsetting=$.extend(defaults,options);varwrap=$(this);varwrapWidth;varcontent=wrap.children('.cluster')varcontentWidth;varwrapColumn;content.css({'position':'absolute'});//アニメーションの開始位置if(setting.start=='leftTop'){content.css({'top':0,'left':0});}elseif(setting.start=='rightTop'){content.css({'top':0,'right':0});}elseif(setting.start=='centerTop'){content.css({'top':0,'left':(wrapWidth/2)-(contentWidth/2)});}functiongoMove(){wrapWidth=wrap.outerWidth();contentWidth=$(content).outerWidth()+(setting.space*2);varcontentNum=0;//何番目 画面端まで来ると0に戻るvarcontentLine=0;//何行目varcontentCount=1;//何番目varcontentPos=[];//そのコンテンツの位置情報wrapColumn=Math.floor(wrapWidth/contentWidth);//横に何カラム並ぶかif(setting.type=='line'){content.each(function(){if(($(this).outerWidth()+setting.space*2)*(contentNum+1)>wrapWidth){contentNum=0;contentLine++;}if(contentLine==0){vartopPos=0+(setting.space*contentLine);varleftPos=(contentWidth*contentNum)+setting.space;$(this).stop().animate({'top':topPos,'left':leftPos},setting.time,setting.easing);}else{vartopPos=content.eq((contentCount-1)-wrapColumn).offset().top+content.eq((contentCount-1)-wrapColumn).outerHeight()+setting.space;varleftPos=(contentWidth*contentNum)+setting.space$(this).stop().animate({'top':topPos,'left':leftPos},setting.time,setting.easing);}contentPos[contentCount-1]=$(this).offset({top:topPos+setting.space,left:leftPos});contentNum++;contentCount++;});}if(setting.type=='low'){varcontentHeight=newArray(wrapColumn);//コンテンツ列のそれぞれの合計高さfor(varc=0;c<wrapColumn;c++){contentHeight[c]=0;}varlowHeight;//一番小さい値varlowHeightNum;//一番小さい値が何番目にあるかcontent.each(function(){if(($(this).outerWidth()+(setting.space*2))*(contentNum+1)>wrapWidth){contentNum=0;contentLine++;}varthisHeight=$(this).outerHeight()+setting.space;if(contentLine==0){$(this).animate({'top':0+(setting.space*contentLine),'left':(contentWidth*contentNum)+setting.space},setting.time,setting.easing);contentHeight[contentNum]=contentHeight[contentNum]+thisHeight+setting.space;}else{lowHeight=Math.min.apply(null,contentHeight);lowHeightNum=$.inArray(lowHeight,contentHeight)$(this).animate({'top':contentHeight[lowHeightNum],'left':(contentWidth*lowHeightNum)+setting.space},setting.time,setting.easing);contentHeight[lowHeightNum]=contentHeight[lowHeightNum]+thisHeight+setting.space;}contentNum++;});}}goMove();//リサイズ処理vartimer=false;$(window).resize(function(){if(timer!==false){clearTimeout(timer);}timer=setTimeout(function(){goMove();},500);});};})(jQuery);