IonicでMasonryレイアウトを使いたいなあと思って試してみたメモです。
javascriptプラグインを入れて使ってみたことがなかったので、ちょこちょこ引っかかりました。
目次
こんな感じの仕上がりを目指します。
Pinterestとかで見るレイアウトです。
Masonryレイアウトを作るのに一番有名なプラグインMasonryを使った場合。
公式サイトからmasonry.pkgd.min.jsをダウンロードし、Ionicのassetsフォルダにpluginとか適当な名前のフォルダを作って入れておきます。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
・・・
</head>
<body>
・・・
<script src="build/main.js"></script>
<!-- main.js読み込んだ後あたりに -->
<script src="assets/plugin/masonry.pkgd.min.js"></script>
</body>
</html>
<div class="grid">
<div class="grid-item"><img src="./assets/images/image01.jpg"></div>
<div class="grid-item" ><img src="./assets/images/image02.jpg"></div>
<div class="grid-item"><img src="./assets/images/image03.jpg"></div>
<div class="grid-item"><img src="./assets/images/image04.jpg"></div>
<div class="grid-item"><img src="./assets/images/image05.jpg"></div>
<div class="grid-item"><img src="./assets/images/image06.jpg"></div>
<div class="grid-item"><img src="./assets/images/image07.jpg"></div>
<div class="grid-item"><img src="./assets/images/image08.jpg"></div>
</div>
横幅固定にした理由は後述。
.grid-item {
width: 150px;
}
公式サイトのVanilla JSに設置するコードを参考にします。
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var Masonry: any; // ←型定義する
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
ionViewDidEnter() {
setTimeout(() => {
var elem = document.querySelector('.grid');
var msnry = new Masonry(elem, {
columnWidth: 150,
itemSelector: '.grid-item',
});
}, 100);
}
}
横幅150pxにしましたが、何故か横幅を％で指定すると表示が崩れます。
オプションをどう指定してもダメでした。何かいい方法あるんでしょうか・・・。
Ionic案件ではレスポンシブ対応することも多いし、次のプラグインの方が扱いやすいかも。
Masonryレイアウトが作れる軽量プラグインMacy。
表示するだけならMasonry.jsよりシンプルで扱いやすい感じがします。
ブレイクポイントごとに横に何列表示するかを設定できます。
Masonryと設置方法はほとんど同じです。
公式サイトからmacy.jsをダウンロードし、Ionicのassetsフォルダに入れます（先ほどのMasonryと同じようにpluginフォルダとします）。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
・・・
</head>
<body>
・・・
<script src="build/main.js"></script>
<!-- main.js読み込んだ後あたりに -->
<script src="assets/plugin/macy.js"></script>
</body>
</html>
<div class="grid">
<div class="grid-item"><img src="./assets/images/image01.jpg"></div>
<div class="grid-item"><img src="./assets/images/image02.jpg"></div>
<div class="grid-item"><img src="./assets/images/image03.jpg"></div>
<div class="grid-item"><img src="./assets/images/image04.jpg"></div>
<div class="grid-item"><img src="./assets/images/image05.jpg"></div>
<div class="grid-item"><img src="./assets/images/image06.jpg"></div>
<div class="grid-item"><img src="./assets/images/image07.jpg"></div>
<div class="grid-item"><img src="./assets/images/image08.jpg"></div>
</div>
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var Macy: any; // ←型定義
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
ionViewDidEnter() {
setTimeout(() => {
var macy = Macy({
container: '.grid',
trueOrder: false,
waitForImages: false,
columns: 6,
margin: {
x: 20,
y: 10,
},
breakAt: {
1200: 5,
940: 4,
520: 3,
400: 2
}
});
}, 100);
}
}
オプションは公式サイトをご覧ください。
ブレイクポイントごとに細かく設定できて好きだなー。
MiniMasonryも同じように設置できます。
しかし要素ごとにheightを指定しないとうまく表示できないようです。要素の高さがバラバラだと厳しい。
IonicでjQuery/jQueryプラグインを従来通り使う方法というQiitaを参考にしました。
今回はjQueryを使わないプラグインばかりでしたが、jQueryも使えるともっとできることが増えそうです。
……あんまり使わない方がいいんだろうな…とは…思う……。
