less

Brickmaker-jsとjQuery-autoPagerEventプラグインとpicbrickアプリとUIの話

NAVER画像検索的なUI（横幅を統一した画像を縦に隙間なく足していく）を実現するライブラリを作りました。並ぶとレンガっぽいので名前はBrickmakerにしました。

• Brickmaker-js
• picbrick（サンプルアプリ）

AutoPagerize的なページを継ぎ足す挙動はjQueryプラグインに切り分けています。このjquery.autopagerevent.jsはdocumentに対してautoPagerイベントを発行するので

$(document).bind('autoPager', function() { ... });

のように待ち受けておいて、発行のタイミングでBrickmakerを動かします。

テストを兼ねてサンプルにpicplzのInteresting画像を一覧するpicbrickを作りました。gridビューにすると分かるように、高さが同じ画像では左から敷き詰められます（ビュー切り替えの吹き出しはCSSで作ってみました）。picplzはjquery.picplz.jsを使って簡単にAPIを利用出来て便利:)

このUIでいくつかサービスを作ってみて、自由度のないUIなので全部同じものになってしまってあまり面白くないと思いました。考えた人（僕はNAVER発祥だと認識しているのですがどうなんでしょう…）しか許されないようなオリジナリティ。Instagram、Colorの画像が正方形なのは表示の事情もあるのかもしれません。みなさんはどう思いますか？