• バックアップ一覧
• 差分 を表示
• ソース を表示
• バックアップ を表示
• jQuery/Masonry へ行く。

---

• 追加された行はこの色です。
• 削除された行はこの色です。

#author("2021-09-25T11:32:51+09:00;2020-06-25T15:00:51+09:00","default:inoue.ko","inoue.ko")
*Masonry
https://masonry.desandro.com/
~

jQueryプラグインMasonryを用いたタイルレイアウトについて紹介します。大きさの異なる複数のブロックが、タイル状に自動整列されます。ウィンドウサイズが変更されると、アニメーションしながらレイアウトを変更します。
~

-DEMO：https://koichi-inoue.github.io/JQ_Masonry/
-CODE：https://github.com/koichi-inoue/JQ_Masonry

~

***HTML
基本形式
 <div class="grid">
   <div class="grid-item">...</div>
   <div class="grid-item grid-item--width2">...</div>
   <div class="grid-item">...</div>
   ...
 </div>

-CDNのコードを取得、あるいは、ダウンロードして、あなたの HTML の HEAD で登録します。
--CDNの場合
 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
--パッケージをローカルに置く場合
 <script src="/path/to/masonry.pkgd.min.js"></script>
-コンテナエリアのクラス名を ''grid'' としています。
-個々のアイテムのクラス名を ''grid-item" としています。
~

***CSS
基本形式
 .grid-item { width: 200px; }
 .grid-item--width2 { width: 420px; }

-2倍、3倍幅のクラスを定義することも可能です。その場合
 2倍幅のwidth = itemのwidth + 余白 + itemのwidth 
とするとよいでしょう。
-このとき 余白 = columnWidth - itemのwidth です。
~

***JavaScript
基本形式
 $('.grid').masonry({
   // options
   itemSelector: '.grid-item',
   columnWidth: 200
 });

-すべての画像を読み込んだ後で、処理が動くよう以下の記述をしています。
 $(window).on("load",function(){
-コンテナエリア（grid）に対して以下の形式で、オプションを記述します。
 $('.grid').masonry({　オプション・・・ });
-最低限必要なオプション記述は以下の２つです。
 columnWidth: 240,　←アイテムが占有する幅(px)を記述します。
 itemSelector: '.grid-item',　← アイテムのクラス名を記述します。
~
~
~