質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2996閲覧

wordpressに埋め込んだ無限スクロールのロード時にmasonry.jsのタイル描画処理がされない件

ebsffzal

総合スコア107

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/13 20:44

みなさま

いつもお世話になっております。

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のタイル表示を行いたい。

お手数かけますが、有識者の方のアドバイスをいただければ幸いです。
どうぞよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

要素を追記する書き方があるようです。

【jQueryの「Masonry」と「Infinitescroll」でPinterest風一覧ページを作る | ColdSleep Works】
http://works.coldsleep.jp/blog/sotd/

【WordPressでMasonry+Infinite scrollを利用する | hacknote】
http://hacknote.jp/archives/11667/

【Masonry · Methods】
http://masonry.desandro.com/methods.html

投稿2016/11/14 01:57

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ebsffzal

2016/11/14 02:07

kei344さま 情報ありがとうございました。 まずは上記のサイトを確認してみたいと思います!
ebsffzal

2016/11/18 01:18

kei344様 この問題につきましては、wordpress側で無限スクロールプラグインを使っていた為の問題でした。 プラグインを使わずに、jsのライブラリを実装することで解決にいたりました。 大変ありがとうございました。
guest

0

憶測での回答となりますが、可能性としてまず考えられるのは、.main_blockが複数存在することです。

JavaScript

1$container.each(function() { 2 $(this).masonry({ 3 itemSelector: '.box', 4 columnWidth: 218, 5 isAnimated: true, 6 isFitWidth: true, 7 isRTL: false, 8 gutterWidth: 0, 9 containerStyle: { position: 'relative' }, 10 isResizable: true 11 }); 12});

上記のように、複数のコンテナ($container)それぞれを処理するといかがでしょうか?
※未検証ですみません。。

投稿2016/11/14 01:33

fee

総合スコア71

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ebsffzal

2016/11/14 02:00

freeさま 回答ありがとうございました。 その後、調べたのですが、「.main_block」は画面上に1個でした。 中身の「<a href="#md1" class="modal-link box cboxElement">」が増えていく仕組みでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問