メモログ

塵が積もって山とならないメモのログ

縦方向のfloatを実現するjQuery Masonry

いわゆるPinterest風な縦方向にfloatさせるjQueryのpluginが.net Magazineで紹介されていたので、試してみました。floatさせたいコンテンツのclass(と全体を囲っているコンテナのclass)と、1カラムあたりの幅を指定するだけで、縦方向にfloatさせることができます。便利。写真の記事一覧画面とか、写真があるとやはり映えますなあとか、悦に入っています(写真最近撮ってないな)。

オプションもいろいろあって、jQuery Mansoryに書かれています。isFitWidthをtrueにすると、表示幅にあわせて横に配置できるコンテンツの数を自動的に調整してくれるのでそれを指定。

どのように縦方向にfloatさせるかというと、コンテンツのdivにposition:absoluteを設定して、高さをOuterHeightとかで取得して積み上げて配置している様子(詳細は勉強不足…)。そのため、画像などがロードされるまえに高さの計算がされると、画像がロードされたときにコンテンツの高さが変わるのでレイアウトが重なってしまう。

そのあたりの対策がHelpに書かれていて、方法としてはロードし終わったあとにmasonryを実行するか、imagesLoadedのtriggerを使用して、triggerが反応したときにmasonry.reload()をするといい。

Demoも充実していて、Demoの画面とそこに書かれているmasonry用のコードをコピペするだけでも使えてしまう。すばらしい。 特にTumblelog exampleはいい感じ。pinterest風なカラムの幅が一定のデザインも良いですけど、大中小の横幅がバランスよく混じっているのも動きがあって良いですね。