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. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  2. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  3. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  4. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  5. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  6. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP