みなさま
いつもお世話になっております。
wordpress上の「Infinite Scroll」と「masonry.js」を使った、画面挙動について質問させていただきます。
かれこれ4~5時間以上ハマっていまして、お知恵を拝借させていただきたいのです。
■環境
ネット上のVPSサーバ(LAMP環境)
■やったこと
・wordpressにプラグイン「Infinite Scroll」をインストールし、
TOPページ上に無限スクロールをできるようにループ処理を記述しました。
・また、初回の画面描画時にはmasonry.jsを使い、TOP画面の各要素がタイル上に
配置されるようにしております。(初回表示時には問題なし)
・次に、「Infinite Scroll」で動的に追加された要素に対し、無限スクロールで表示された
HTML要素に対して、masonry.jsのタイル表示の処理を実装しようとしたのですが、
「Infinite Scroll」のページロード後のコールバック処理で
masonry.jsが正常に動作しない。という現象がおきています。
■調査した情報
①「Infinite Scroll」のコールバック処理を何度も見直しました。
具体的には以下のように記述しています。
いろいろと紆余曲折して、コールバックは最終的に以下のように記述しました
便宜上、alertを仕込んでいます。
javascript
1alert('1'); 2$('.main_block').imagesLoaded(function(){ 3 alert('3'); 4 var $container = $('.main_block'); 5 $container.masonry({ 6 itemSelector: '.box', 7 columnWidth: 218, 8 isAnimated: true, 9 isFitWidth: true, 10 isRTL: false, 11 gutterWidth: 0, 12 containerStyle: { position: 'relative' }, 13 isResizable: true 14 }); 15 alert('4'); 16}); 17alert('2');
②開発者ツールで無限スクロール(2ページ目)のHTML描画のタイミングを調査
ブラウザ表示で、2ページ目のロード完了時のコールバック処理として、上記のjsが起動していることを確認。
アラートの順としては
「1」→「2」→「3」→「4」と表示され、コールバックの処理は意図した流れになっていることを確認
HTML
1(初回ロード時のHTML) 2<div class="main_block" style="position: relative; width: 1090px; height: 1692px;"> 3 <a href="#md1" class="modal-link box cboxElement" style="left: 0px; top: 0px;">要素1</a> 4 <a href="#md1" class="modal-link box cboxElement" style="left: 218px; top: 0px;">要素2</a> 5 <a href="#md1" class="modal-link box cboxElement" style="left: 436px; top: 0px;">要素3</a> 6 <a href="#md1" class="modal-link box cboxElement" style="left: 654px; top: 0px;">要素4</a> 7 <a href="#md1" class="modal-link box cboxElement" style="left: 872px; top: 0px;">要素5</a> 8</div> 9 10(無限スクロール、2ページにロードされたHTML) 11<div class="main_block" style="position: relative; width: 1090px; height: 1692px;"> 12 <a href="#md1" class="modal-link box cboxElement">要素6</a> 13 <a href="#md1" class="modal-link box cboxElement">要素7</a> 14 <a href="#md1" class="modal-link box cboxElement">要素8</a> 15 <a href="#md1" class="modal-link box cboxElement">要素9</a> 16 <a href="#md1" class="modal-link box cboxElement">要素10</a> 17</div>
③ただし、アラートの3の次の段階で、描画されたHTMLに対し、masonryの命令「$container.masonry({」が
効かず、画面のタイル表示がうまくいかないです。(HTMLタグ内にstyleが割り当てられない)
■期待する動作と質問事項
無限スクロールの2ページ目以降のロードで、masonryのタイル表示を行いたい。
お手数かけますが、有識者の方のアドバイスをいただければ幸いです。
どうぞよろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/14 02:07
2016/11/18 01:18