jQuery/Masonry をテンプレートにして作成

開始行:
*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のコードを取得、あるいは、ダウンロードして、あなたの ... --CDNの場合 <script src="https://unpkg.com/masonry-layout@4/dist/mas... --パッケージをローカルに置く場合 <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',　← アイテムのクラス名を記述... ~ ~ ~

終了行:
*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のコードを取得、あるいは、ダウンロードして、あなたの ... --CDNの場合 <script src="https://unpkg.com/masonry-layout@4/dist/mas... --パッケージをローカルに置く場合 <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',　← アイテムのクラス名を記述... ~ ~ ~

ページ名: