Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置するレイアウトジェネレータのjsライブラリです。それは、まるで石畳のように規則性を持って敷き詰めたようなイメージです。同様なジェネレータはこれまでもありましたが、jQueryありきで構築されなければならず、不要な機能もついてしまっています。このBricks.jsはHTMLマークアップとCSSで構築が可能なライブラリです。
Bricks.js
Bricks.jsのデモページは以下になります。
Bricks.jsの動きは超高速です。要素の表示サイズにあわせて、カラム数やカラム間のスペースを指定してコンテンツを配置してくれます。jQueryに依存していないライブラリなので、HTMLとCSSで実装が可能となります。手順は下記のようになります。
インストールしたBricks.js をインスタンス化します。その後、必要に応じてパラメーターを設定します。
コンテンツのサイズ指定は次のことに念頭において行ってください。
- サイズは必ず指定する必要があり、その値は最小と最大を記載
- メディアクエリを意識し、横幅は最小値（任意の単位でOK）
- それぞれのブレークポイントでのグリッドの幅は、CSSで指定
- サイズ指定のないプロパティは、最小のブレークポイントで最初に出現する挙動となる
また、重要な作業としてAPI／イベントの指定があります。これは、Bricks.jsの大きな特徴であるページでのカラム数の指定やカラム間のスペース、リサイズなどの動きに関わる指定になります。リサイズはBricks.jsの配布サイトでもオススメしています。詳細とともに記載されているのでご覧ください。
Bricks.jsはMasonryと類似していますが、それよりも超高速なのがBricks.jsとのこと。より高速なグリッドレイアウトを実装したい方は、ぜひBricks.jsを活用されてみてはいかがでしょうか？
