安川

都内広告代理店勤務のSEです。 元々テレビ番組のADやスマホゲームのプランナーをしてましたが、今は社内でシステムの運用や開発をしてます。 SEなんですが、上記の経歴のためエンジニアリングの知見が浅いです。 そのため勉強したく、自身でプログラミングをしています。 ・Ruby ・JavaScript などで開発の経験がありますが、最近....
プロフィールをもっとみる

--

募集をシェアしてメンターを探そう
シェア

※ この募集は締め切られました。

プログラミング jQuery

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

2021年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を再配置することで何とか解消しましたがスマートではありません。
根本的な解決をアドバイスいただける方を引き続き募集いたします。

安川

プロフィール

都内広告代理店勤務のSEです。
元々テレビ番組のADやスマホゲームのプランナーをしてましたが、今は社内でシステムの運用や開発をしてます。

SEなんですが、上記の経歴のためエンジニアリングの知見が浅いです。

そのため勉強したく、自身でプログラミングをしています。

・Ruby
・JavaScript

などで開発の経験がありますが、最近Pythonが好きになって勉強してます。

--

募集をシェアしてメンターを探そう
シェア