60L.design へのメールフォームです。 ご質問、お問合せ、お見積り等、お気軽にお送りください。
データの送信は firestorage 等の転送サービスをご利用ください。

お名前 ※必須項目 お名前を入力してください
会社様名
お返事先メールアドレス ※必須項目 お名前を入力してください
お問合せ種別

お問合せ内容 ※必須項目 お問合せ内容を入力してください
次の2つの数字を足して入力してください。 ※必須項目 半角数字を入力してください。

+

=

閉じる
お気軽にお見積り、
お問合せ下さい
jQueryライブラリのmasonryでちょっと困った

jQueryライブラリのmasonryを使う機会がありました。というのも、現在制作中のwebサイトで、masonryのご指定があったためです。

masonryは3年ほど前にも1回使いましたが、幅が固定の画像を羅列する際、それぞれの高さに応じて敷き詰めてくれるライブラリです。ゴリゴリ計算しているんでしょうが、手軽に大量のアイテムを並べられて気持ちがいいライブラリですね。

ところが、iPhoneでうまく表示されたのを確認していて偶然気付いたのですが…『更新をすると表示が崩れる』!?
上の画像の右側のように綺麗に表示されていたはずなのに、ブラウザ(safari)をリロードすると左のように崩れてしまう…。ページ下端のページネーションがこんにちはしてきてます。

で、『iPhoneで発生した』『画像関連が崩れる』『高さがおかしい』という症状から思い当たる節が。
『iPhoneやMacOS Safariでは、画像が完全に読み込まれないと、画像の幅、高さが取得できない』という仕様です。
ということで、今回は無理やりなのですが『ならページ読み込んでから1秒後にもう一回mansonryを動かしちゃえ』という方法を試してみたところ、これで解決してしまいました。
上図のようにmasonryの初期化部分を、setTimeoutでもう1回1秒後に実行しただけです。

masonryの情報は、どうも痒いところに手が届かない感じで、『こういう風にしたいけど…』というのが日本語情報どころか公式ページにも少ない感じで、ややクセもあり、少しひねった使い方には注意が必要そうですね。
本当はimgタグをバインドして全ての読み込みが終わり次第、masonryを実行するのが正しいのでしょうが、そんなに几帳面なページでもなかったのでこれでチェックに出してしまいました。

今回はmasonryに絡めての話でしたが、『画像を読み込み切るまではiPhoneで画像サイズを取得できない』という仕様は結構厳しい制限なところもあります。
いくつか問題にぶつかった経験があるので、へっぽこ解決法をまた今度ご紹介したいと思います。

『ふうらい姉妹1巻』読んでいて主人公の生活が非常に不安になる、超シュール系4コマ。

『LIAR GAME 18』最終戦、四国志ゲーム開始!19巻は4月中に発売なので完結直前です!

『野崎まど劇場』なんて酷いラノベだ…と、爆笑しました。フリーダムな短編集。将棋のアレも…。

『iPhoneアプリ開発の教科書』カラーでイラスト多くて、まずはこれを読んでみようと購入しました。

『数論の世界』高校レベルの知識での面白い数論の話。高校の時にこの本を知っていたら…。

『ミーティアわんわん』古賀亮一先生の電撃新連載!もったいないので少しずつ読んでます。

『新ゲノム5』相変わらずの古賀亮一マンガです。とにかくギャグの密度が高い…!

『HTML5&CSS3ポケットリファレンス』技術評論社のPRシリーズは鉄板です。

『容疑者Xの献身』今更ながら、こんなに面白い邦画に出会えるとは…!悪い予想を上回る結末。

『ゆるめいつ』シュール系脱力4コマ!この作品に触発されて4コマを描き始めました。