このスクリプトを使用してレスポンシブソート可能グリッドレイアウトを作成する

カスタムグリッド 最初から作成するのが最も難しい機能のいくつかです。あなたは石積みグリッドプラグインをたくさん見つけることができますが、それら それぞれ独自の制限と要件があります.

の ムリ文字 必要な人には強力な代替手段です。 タッチ対応のソート可能なレスポンシブグリッド要素.

それは上に構築されています アニメーション用のVelocity.js, 一緒に モバイルタッチを処理するためのHammer.jsライブラリ. むり ではない jQueryが必要です, つまり、グリッドインターフェイス用の数少ない一般的なJavaScriptプラグインの1つです。.

メインのプロジェクトページには、 すべての機能を備えた美しいグリッドデモ. アニメーション効果、ドラッグ＆ドロップのサポート、およびさまざまなサイズのさまざまなグリッド要素。このデモでは、Muuriグリッドを使用してどれだけ制御できるかを紹介します。.

選んでいいですよ 表示する要素, クラス（フィルタリング）に基づいて、 空のスペースをどのように埋めたいか.

石積みの格子は頻繁に空の点を残します グリッド要素は必ずしも完全には一致しません. これはPinterestなどの大規模Webサイトではかなり一般的です。でも、できます ドラッグ可能なグリッドアイテムを追加する ほとんどすべてのユーザー制御インターフェースへ.

について考える ウィジェットレイアウトを使ったソーシャルプロフィール そして彼らはどのように働くのでしょう。または、について考える プログレッシブWebアプリとして動作するカスタムのやることリスト JavaScriptで。 Muuriページには、実際にこれのすばらしいデモがあり、サンプルのTo-Doリストと、それがモバイルのPWAとして機能する方法を示しています。.

始めるためには、あなただけの Muuriスクリプトとともに、すべてのJavaScript依存関係を含める. あなたはnpmを通してそれらを引き下げるか、GitHubリポジトリからコピーをつかむことができます.

次にあなた コンテナグリッド要素を作成する そして の新しいインスタンスでそれをターゲットに ムリ（） 方法. GitHubレポジトリのコードスニペットをコピーすることで、すべて非常に簡単で、特に使いやすいです。.

あり 最近のすべてのブラウザ（IE9 +）およびタッチ対応インタフェースを完全サポート, このプラグインはドラッグ＆ドロップのグリッド機能に最適の一つです。.

Muuriのホームページを読んで、ライブ・デモをいじってみてください。これは 動的グリッドに最適なシステム そしてそれは まだ活発に開発中, だからあなたはこのプラグインが長距離のためにあるつもりであると信頼できる.