ユーザー登録で「300円クーポン」プレゼント!まずは無料登録から!
募集をシェアしてメンターを探そう
シェア
エンジニア HTML jQuery

masonry + infiniteScroll 不具合解消のメンター募集

1月16日
予算
5,000円 〜
提案数
1人が提案中

個人のWEBサイトを製作中です。
masonryとinfiniteScrollを用いて写真を一覧表示&無限スクロールを実装しました。

Chrome(PC)では正常に動作しますが、Chrome(スマホ)とSafariでは、無限スクロールで新たに読み込んだ部分だけ画像が潰れたようになったり、重なってしまいます。

調べた所画像の高さが取得される前にmasonryが並べ替えを行っているため、という説が有力そうでしたが、
imagesLoadedを記述しても解消されませんでした。
imgタグのstyleに直接heightを指定すると解消されますが、画像の高さは可変であるため実運用での指定は難しいです。また、スクロール後に一度ブラウザのサイズを変える(ドラッグで広げたり縮めたりする)と正常に並び直されます。

やはり画像の高さに原因があるようですが独力では行き詰まってしまったので、メンター様を募集します。

コミニュケーションしながら問題の解消までお付きあい下さる方、よろしくお願いいたします。
コミニュケーションはチャットツールでと考えています。

#追記

$(window).on("scroll touchmove",function(){
var $grid = $('#gallery')
$grid.masonry('layout');
})

スクロールをした後にmasonryを再配置することで何とか解消しましたがスマートではありません。
根本的な解決をアドバイスいただける方を引き続き募集いたします。

メンティーに提案してみましょう
募集をシェアしてメンターを探そう
シェア