最も魅力的な10のjQueryグリッド

jQueryは、HTML要素を選択してDOMを操作するための簡単な方法を提供するので、通常JavaScriptプログラミングに足を踏み入れたいほとんどの人にとって最初の選択肢です。最近のW3Techの統計によると、jQueryは大人気です。, “JavaScriptライブラリを知っているウェブサイトの95.4％がjQueryを使用している.”

jQueryは、多くのJavaScriptライブラリで依存関係としても使用されています。新しいメジャーリリースのアルファバージョンであるjQuery 3.0は既に存在します。あなたのプロジェクトが何らかの方法でjQueryを使っていて、 動的で柔軟なレイアウト あなたの設計のためにあなたのフロントエンドスタックにjQueryグリッドプラグインを含めることを検討する価値があります.

jQueryグリッドの仕組み?

jQueryグリッドを使えば あなたのサイトにPinterest風のレイアウトを作成する. それらは仮想マトリックスのように働き、それらは “箱の中の箱” 原理。 jQueryグリッドは、項目の最適な配置を動的に計算し、最も空白のないスペースになるようにページにそれらを入力します。.

CSSグリッドと比較したjQueryグリッドの主な利点は、幅や高さが異なるイメージやその他のメディア要素を扱うことです。クールなJavaScript効果も、モダンなレイアウトを作成するためにjQueryグリッドを使用する大きな理由です.

この記事では、について読むことができます 最も魅力的な10のjQueryグリッド 現在市場に出ているもの - もちろん、jQueryのように、それらはすべてオープンソースで無料です。.

ネストされたjQuery

jQuery Nestedは便利な機能を提供します。 レスポンシブなマルチコラムグリッドレイアウト そしてあらゆる種類のデバイスに渡って動作します。このjQueryプラグインは自分自身を完全にギャップフリーとして宣伝しています。このスローガンは、最初は安いマーケティングトリックのように思えるかもしれませんが、その作成者が約束したように、実際にはプラグインがギャップフリーを非常にうまく達成しています.

jQuery Nestedは、次の独自のスクリプトに従います。 グリッド行列の生成. 最初にマルチコラムグリッドを作成してから、ギャップのマトリックスをスキャンし、さまざまな要素を並べ替えることによってそれらを埋めます。最後に - そしてそれがこのグリッドをギャップレスにするステップです - それは適切にギャップに収まらない一番下の行の要素をリサイズします.

2.フリーウォール

Freewallはあなたがそれがイメージグリッド、入れ子になったグリッド、石積みまたはメトロスタイルのグリッドであるかどうかあなたが望むレイアウトを作成することを可能にします。それはあなたがのようなJavaScript変数として設定できる多くのオプションを持っています gutterX、gutterY、アニメート、cellW、cellH, などのカスタムイベントがあります。 onGapFound そして onResize, そしてカスタムメソッドも.

あなたは彼らのウェブサイトで素晴らしいコード例を見つけることができます。開発者たちは、まだ古いブラウザ用に設計しなければならない貧しい魂についても気を配っていたので、Freewallは Internet Explorer 8, そしてそれはまた持っています 無効化されたJavaScriptの解決策, それが使用するように JSフォールバック戦略としてのCSS 3アニメーション. Freewallに関する私達の記事をここでチェックしてください.

3.石積み

古き石積みの名前は、すべての経験豊富なデザイナーの耳になじみのあるものでなければなりません。あなたがそれを聞いたことがない場合には、石積みは カスケードグリッドレイアウトライブラリ それはjQueryとvanilla JavaScriptの両方で動作します.

この便利なプラグインは、多くの人気のあるWordPressテーマの基盤です。 CDNから直接ライブラリにリンクできるので、サーバーにアップロードする必要さえありません。.

>