ITエンジニア/デザイナ向けにオープンソースを毎日紹介

jQuery MasonryはPinterest風の表示を行うjQueryプラグインです。

Pinterest風の大小さまざまなボックスを並べて表示するデザインが人気ですが、より高度な表現を実現したいと考える人に使ってみて欲しいのがjQuery Masonryです。


トップページです。ここも面白い表示です。


単純なシングルカラム。


マルチカラム。


画像。


メディアミックス。


アニメーションです。


項目の追加も可能。アニメーション付きです。


ページの最下部までいくと自動追加読み込みします。


一定の幅を空けて配置される表示法です。


右寄せ。


中央寄せ。


固定表示。赤い枠は常に右上に出ます。

単純な固定幅のカラムはもちろん、横に複数段にまたがる表示も可能です。画像の大小も適切に判定して表示してくれます。動画やテキスト、画像を組み合わせて表示も可能で、これはメディアなどで使うと面白そうです。一回表示して終わりではなく、ウィンドウ幅に応じた内容の変化や項目の追加も可能となっています。

jQuery MasonryはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。


MOONGIFTはこう見る

この手のライブラリは多数あり、見飽きた感もあるのですが、それでもまだ人気の高い表示形式になっています。個人的にはjQuery Masonryのメディアミックスの表示は新聞に近いものがあると思っています。コンテンツの出し方を工夫すれば面白い使い方も見つかるかも知れません。

Webでは情報を一覧表示するのが主流であり、それぞれの情報の重さや重要性はリストの並び順で表現されるようになっています。jQuery Masonryのような表示はその大きさや配置によって多次元で情報の重み付けが行えるようになっています。そういった情報の判定方法もまた面白そうです。

jQuery Masonry

desandro/masonry

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2