Bricks.js

JavaScript

超高速なMasonryレイアウトを実装できる「Bricks.js」

Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置するレイアウトジェネレータのjsライブラリです。それは、まるで石畳のように規則性を持って敷き詰めたようなイメージです。同様なジェネレータはこれまでもありましたが、jQueryありきで構築されなければならず、不要な機能もついてしまっています。このBricks.jsはHTMLマークアップとCSSで構築が可能なライブラリです。

Bricks.js

デモ

Bricks.jsの動きは超高速です。要素の表示サイズにあわせて、カラム数やカラム間のスペースを指定してコンテンツを配置してくれます。jQueryに依存していないライブラリなので、HTMLとCSSで実装が可能となります。手順は下記のようになります。

インストールしたBricks.js をインスタンス化します。その後、必要に応じてパラメーターを設定します。

  • サイズは必ず指定する必要があり、その値は最小と最大を記載
  • メディアクエリを意識し、横幅は最小値(任意の単位でOK)
  • それぞれのブレークポイントでのグリッドの幅は、CSSで指定
  • サイズ指定のないプロパティは、最小のブレークポイントで最初に出現する挙動となる

また、重要な作業としてAPI/イベントの指定があります。これは、Bricks.jsの大きな特徴であるページでのカラム数の指定やカラム間のスペース、リサイズなどの動きに関わる指定になります。リサイズはBricks.jsの配布サイトでもオススメしています。詳細とともに記載されているのでご覧ください。

Bricks.js

関連記事

  1. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  2. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  3. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  4. Tiny Colorpicker
  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  6. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP