Bricks.jsで高速石積みグリッドレイアウトを作成する

それはいつもとても簡単です jQueryを使ってグリッドを作成する, 開発者からのプラグインと無料のチュートリアルを使う.

ただし、石積みのグリッドは、構築が困難です。 ページ全体に均等に収まらない. 列の幅は固定サイズですが、 アイテムの高さは大きく異なる可能性があります.

作ります 完璧な石積みグリッド あなたはのようなプラグインが必要です Bricks.js.

このプラグインは完全にオープンソースで途方もなく速いです。それは 0.5秒以内にグリッドを描画する, ページに何十もの項目があっても.

彼らがレイアウトを普及させて以来、ほとんどの人はPinterestの石積みのグリッドを認識しています。しかし、それはそれ以来になった 他の多くのWebサイトで使用されています, も.

Bricks.jsを使い始めるには、次のものが必要です。 いくつかのコンテンツ そして デフォルトのページレイアウト. プラグインは、npmから、またはGitHubを介して簡単にインストールできます。.

初期設定では、合格です。 3つの特定パラメータ：

プラグインは、これらすべての値を使用して、組積グリッドを最初から自動化します。.

そして、あなたもすることができます 無限ロードに使用 Pinterestのように機能する石積みグリッドが必要な場合.

デモページをチェックしてください。 インタラクティブグリッド テスト用に変更できること君は 要素の総数を定義する レンダリング時間の合計を表示しながらプロセスを自動化します.

たとえば、私はグリッドをテストしました。 500の要素 そしてそれだけで 13ミリ秒 完了する。これは500枚の画像すべてをロードする時間には関係ありませんが、 自動生成グリッドの場合は13ミリ秒 とても印象的です.

GitHubからファイルをダウンロードしてインストールの指示に従うことから始めましょう。これは最初は混乱を招くかもしれませんが、玩具が多ければ多いほど設定が簡単になります.