QOXホームへ

IonicでMasonryレイアウト

Yuko Hashimoto

Yuko Hashimoto

Tags: ,

IonicでMasonryレイアウトを使いたいなあと思って試してみたメモです。
javascriptプラグインを入れて使ってみたことがなかったので、ちょこちょこ引っかかりました。

作りたいMasonryレイアウト

こんな感じの仕上がりを目指します。
Pinterestとかで見るレイアウトです。

Masonry.jsを使う

Masonryレイアウトを作るのに一番有名なプラグインMasonryを使った場合。

JSを設置

公式サイトからmasonry.pkgd.min.jsをダウンロードし、Ionicのassetsフォルダにpluginとか適当な名前のフォルダを作って入れておきます。

index.htmlに読み込む

html,cssを用意

tsで呼び出し

公式サイトのVanilla JSに設置するコードを参考にします。

横幅150pxにしましたが、何故か横幅を%で指定すると表示が崩れます。
オプションをどう指定してもダメでした。何かいい方法あるんでしょうか・・・。

Ionic案件ではレスポンシブ対応することも多いし、次のプラグインの方が扱いやすいかも。

Macy.jsを使う

Masonryレイアウトが作れる軽量プラグインMacy
表示するだけならMasonry.jsよりシンプルで扱いやすい感じがします。
ブレイクポイントごとに横に何列表示するかを設定できます。
Masonryと設置方法はほとんど同じです。

JSを設置

公式サイトからmacy.jsをダウンロードし、Ionicのassetsフォルダに入れます(先ほどのMasonryと同じようにpluginフォルダとします)。

index.htmlに読み込む

htmlを用意

tsで呼び出し

オプションは公式サイトをご覧ください。
ブレイクポイントごとに細かく設定できて好きだなー。

MiniMasonry.jsでも試してみた

MiniMasonryも同じように設置できます。
しかし要素ごとにheightを指定しないとうまく表示できないようです。要素の高さがバラバラだと厳しい。

他にも色々可能性がありそう

IonicでjQuery/jQueryプラグインを従来通り使う方法というQiitaを参考にしました。
今回はjQueryを使わないプラグインばかりでしたが、jQueryも使えるともっとできることが増えそうです。

……あんまり使わない方がいいんだろうな…とは…思う……。

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up