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

デニム生地に刺しゅう文字イラストレーターでデニム生地に刺しゅう文字のWeb用アイコンを作ってみよう!前のページ

テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」次のページWEB TICKER

関連記事

  1. Air Datepicker

    JavaScript

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

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

  2. Letter Effects and Interaction Ideas
  3. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

  4. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  5. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP