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. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  2. jQuery plugin Watermark
  3. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  4. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  5. jquery-time-slider

    JavaScript

    時間と日付を選択できる「jquery-time-slider」

    jquery-time-sliderは時間と日付を選択できるjQuer…

  6. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP