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. Multi-Step-Form-Js
  2. no-image
  3. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  4. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  5. Quttons

    JavaScript

    ボタンの形状やカラーが変化するjQueryプラグイン「Quttons」

    Quttonsはボタンをクリックすると形状やカラーが変化して新しいコン…

  6. ArtDesignSlider

    JavaScript

    レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」

    ArtDesignSliderは豊富なエフェクトでレスポンシブにも対応…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP