Googleグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ[Packery]を紹介します。動作サンプルをご覧ください。Packery:動作サンプルご覧いただいたように、任意のボタンをクリックすることで要素が追加され、ウィンドウサイズを変えるとアニメーションを伴って再レイアウトします。注目すべきメインの機能である「ドラッギングによる並べ替え」は動作も大変スムーズです。その完成度は「超高機能」と呼ぶに相応しいでしょう。似たようなプラグインでは、当サイトでも紹介している[Masonry]や[Isotope]がありますが、驚くべきことに、実はこれらのプラグインの開発者は同一人物なんです。氏は、他にも[Flickity]や[ImagesLoaded]などの有名なプラグインを多数開発しています。氏の詳しいプロフィールは以下より。DeSandro:ポートフォリオサイトプラグイン[Packery]の使い方さて。この素晴らしいプラグイン[Packery]の使い方ですが、まずは公式サイトから、必要なファイル一式をダウンロードしてきます。Packery:公式サイト最低限必要なのは「packery.pkgd.min.js」または「packery.pkgd.js」のどちらか1つ。通常はあらかじめ圧縮されている「packery.pkgd.min.js」を使います。嬉しいことにjQueryに依存しないので、基本的にはこのファイル1つだけでも動作可能。内で読み込んでおきます。src="packery.pkgd.min.js"></script></head>続いて[Packery]で動かす各要素を構築します。名付けた子要素を配置しています。h2">...</div>...</div>スタイルシート(CSS)も同時に定義しておきます。{height:160px;}最後に[Packery]を動かすための設定を記述します。10});</script>以上で、基本的な設定は完了。これだけでMasonry風のグリッドレイアウトを実装できることになります。ドラッグによる並べ替えに対応させる場合には、別途で[Draggabilly]というライブラリを利用します。DeSandro氏が制作しています。先ほどのコードに追加で、ダウンロードしてきた「draggabilly.pkgd.min.js」を読み込みます。src="draggabilly.pkgd.min.js"></script></head>初期設定の箇所では「Draggabilly」を有効化する記述を追加。UI」によるドラッグの対応や、レイアウトパターンの変更、要素の大きさの変更など、様々なオプションが利用可能です。詳しい仕様は公式サイトで紹介されているので参考にしてみてください。グリッドレイアウトのサイトを構築する際、[Masonry]や[Isotope]などの代替として、選択肢の1つに加えてみることをお勧めします。Packery:公式サイト:動作サンプルTwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】重複しない複数の要素をランダムに表示する方法。(jQuery編)【jQuery】ウィンドウ内に要素が表示されたときに処理を行う[jquery.inview]プラグイン。Height]の使い方。【jQuery】画像、動画、ボックス要素をポップアップで表示させる[Lity]の使い方。【jQuery】テキストをシャッフルさせるエフェクトを加えるプラグイン[chaffle]を紹介します。【PHP】コピーライトの年号の表記を書き換えるのが面倒!...そんなとき。