画像やコンテンツを隙間なく自動でアニメーションしながら並べ替えてくれます。
↓デモ : 大きさの違う画像ですが、隙間なく自動でレイアウトしてくれます。ブラウザの幅を狭くし動きを体験してみてください。
















設定
https://masonry.desandro.com/ まずここからmasonry.jsをダウンロードします。
masonry.jsとは別に(例)masonry_sub.jsを作成します。
↓例)対象幅 px 固定バージョン(columnWidth: 200にし、スタイルシートは.boxにマージンを適当に付けます)
1 2 3 4 5 6 7 |
$(function(){ $('.demo_masonry').masonry({ //外側の要素を.demo_masonry itemSelector: '.box', //並べ替える対象を.boxとしました。 columnWidth: 200, //一列の幅(px) isAnimated:true, //アニメーション trueまたは、false }); }); |
↓例)上のデモが対象幅 % バージョンです(columnWidthを削除し、スタイルシートで.boxをwidth: 32%)
1 2 3 4 5 6 7 |
$(function(){ $('.demo_masonry').masonry({ //外側の要素を.demo_masonry itemSelector: '.box', //並べ替える対象を.boxとしました。 //一列の幅(px) isAnimated:true, //アニメーション trueまたは、false }); }); |
ダウンロードしたmasonry.jsと、作成したmasonry_sub.jsを外部から読み込ませます。
- サイト全体 外部JavaScriptを読み込ませる
- ページ単体 プラグイン Custom CSS and JS
- 最新のjQueryを読み込ませるため header.phpに↓を挿入
1234<?phpwp_deregister_script( 'jquery' );wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');?>
設置
基本は↓このような感じになります。
1 2 3 4 5 6 7 8 9 10 |
<div class="demo_masonry"> <div class="box">wordpress</div> <div class="box">masonry</div> <div class="box">jQuery</div> <div class="box">並べ替え</div> <div class="box">コンテンツ</div> <div class="box">画像</div> </div> |
あとは、.demo_masonryと.boxをスタイルシートで調整します。
コメントを残す