jQueryを使ったPinterestチックな画像一覧表示

WEBの画像や文章を手軽にクリップして共有するサービス PinterestTumblr が、以前のtwitterのような急成長を見せていますが、本日は大量の画像をタイル状に一覧表示するjQueryプラグイン、flexをご紹介します。

見てもらえば一瞬で分かりますが、下のようなアニメーションをしてくれます。

画像を指定すれば、floatで勝手にタイル状に並ぶのかな?と期待したのですが、画像を指定した後に、さらに絶対配置で位置を指定します。

画像一枚に対し、配置する場所、配置する大きさ、拡大する大きさを指定していく作業は骨が折れます。floatで動的配置できないかと簡単に試してみましたが、動的だと要素がはみ出した場合に次段に移動するので見苦しい感じとなり、美しい拡大を実現するには一つ一つ丁寧に大きさを指定してやる必要がありそうです。

一度作成したら1つの画像の大きさを修正するだけで周りにも影響を与えるので、使い勝手にやや難が残りますが、慣れてしまえばサクサクと数字入力ができます。

画像を規則正しい大きさと配置で固定すればfloat対応も可能かと思います。しかし不規則な並びだから面白いので、そこは悩みどころです。

jQuery plugin – Flex – Demo

 

広告