こんにちは、BЯuno(@bbbbruno69)です。
可変グリッドレイアウトを簡単に実現できるJSライブラリ「Mansory」は非常に便利なのですが、画面を何回かリロードすると表示が崩れてしまうときがあります。
こんな風に↓
これは、画像が読み込まれる前にMansoryが動作してしまい、ボックスの位置が決められた後で画像が読み込まれることが原因でおきます。
ということは、画像を読み込んだ後にMansoryが動作すればいいことになります！
自分でも解決策をググってみたのですが、どこのサイトも2014〜2016年の古い情報ばかりでした・・・。
今回は自分で最新の方法を調べて解決できたので、シェアしていきたいと思います！
公式サイトで使い方を確認
まずは公式サイトに行って「Masonry」の使い方を確認しておきましょう。
公式サイトによると、CDNで使う場合はまずは下記のどちらかのリンクをHTMLに読み込みます。
<!-- jQuery読み込む --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Masonry読み込む --> <script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> <!-- or --> <script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.js"></script>
次に、jQueryで使う場合は下記を記述します。もちろんjQureryも読み込んでおきましょう。
$('.grid').masonry({
// ここにオプションを記述
itemSelector: '.grid-item',
columnWidth: 200
});
jQueryオブジェクトには親要素を、itemSelecterでグリッドレイアウトにする要素を指定します。columnWidthでは幅を指定しています。
JavaScriptでも記述できます。その場合は以下です。
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// ここにオプションを記述
itemSelector: '.grid-item',
columnWidth: 200
});
さて、基本の使い方を確認しましたが、このままではグリッドレイアウトが崩れてしまう可能性があります。
次に解決法を見ていきましょう。
解決法１：画像の高さをあらかじめCSSで指定しておく
あらかじめCSSで画像のheightを指定しておけば、画像が読み込まれる前から画像の領域を確保することができます。
こうすることで画像が読み込まれる前にMasonryが動作しても、画像の領域を確保済みのボックスが配置されます。後で画像が読み込まれても、確保済みの領域に画像が収まるだけなので問題は起きません。
しかし、この方法は画像のサイズが事前にわかっていないと使えません。
そこで、次は画像のサイズが事前にわからない場合の方法を紹介します！
解決法２：imagesLoadedを使う
公式サイトで確認したところ、FAQのページで画像が重なってしまう場合の解決策が書いてありました。
ふむふむ、どうやらimagesLoadedを使えばいいらしいですね。
まずは、imagesLoadedを使うためにHTMLで以下２つのいずれかを読み込みます。
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script> <!-- or --> <script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.js"></script>
次に以下のどちらかをJavaScriptに記述します。
// Masonry初期化
var $grid = $('.grid').masonry({
// ここにオプションを記述
});
// それぞれの画像が読み込まれるごとにMasonryを動作させる
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
var $grid = $('.grid').imagesLoaded( function() {
// 全ての画像が読み込まれてからMasonryを動作させる
$grid.masonry({
// ここにオプションを記述
});
});
上記２つの違いは、画像をそれぞれ読み込むか、一気に読み込むかです。どちらでも好きな方を使ってください。
これで何回リロードしてもレイアウトが崩れなければ解決です！
【まとめ】これを記述すればOK！
というわけでまとめると、下記をコピペすればいいだけです。
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jQuery読み込む --> <script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> <!-- Mansory読み込む --> <script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script> <!-- imagesLoaded読み込む --> <script>
Javascript
// Masonry初期化
var $grid = $('.grid').masonry({
// ここにオプションを記述
});
// それぞれの画像が読み込まれるごとにMasonryを動作させる
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
// or
var $grid = $('.grid').imagesLoaded( function() {
// 全ての画像が読み込まれてからMasonryを動作させる
$grid.masonry({
// ここにオプションを記述
});
});
これで、解決ですね！
ちなみに、グリッドレイアウトを学びたい人には以下の書籍がオススメです。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
グリッドレイアウトのサイトを一からコーディングして作っていくので、作りながら学ぶことができます。
また、２カラムレイアウト・シングルページレイアウトのサイトも作りながら学ぶことができます。
- HTML/CSSの基本は勉強したけど、0からサイトを作ったことがない。
- レイアウトごとのコーディング方法がわからない。
- それぞれのCSSプロパティの具体的な使い方を知りたい。
このような方にオススメです！
作っている途中で何回もCSSの具体的な説明がありますし、それぞれの章の最後にはセルフコーディング課題がついていて応用力がつきます。
脱初心者にピッタリな１冊です！！僕はこの本でがっつり学びました。
ということで、今回は以上です！
チャオ！
コメント