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

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

ただいまの
回答率

90.52%

  • PHP

    20302questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16373questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    7188questions

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

  • Ajax

    1090questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Ajaxで動的に追加された要素をmasonryで再配置する

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 719

MakotoHoshi

score 38

WordPressを使った記事一覧で、Ajaxで記事を取得し、一覧に追加する仕組みを作っています。
その際、記事をタイル状に並べるためmasonryを使っているのですが、
Ajaxで追加された分の記事がうまく配置できません。
既に表示されている記事の後ろに重なって表示されてしまいます。

以下にコードを載せます。
jsのプログラミングにくわしいかたご教示お願いします。

●masonry部分

<script>
$(function(){
//メイソンリー
$('#mason-wrap').imagesLoaded(function(){
  $('#mason-wrap').masonry({
  itemSelector: ".grid",
  columnWidth: ".grid.normal",
  isAnimated: true,
  isResizable: true,
  gutterWidth: 0,
  });
 });
});
</script>

●ajax部分

<script>
                    //Ajax
                    var now_post_num = 2; // 現在表示されている数
                    var get_post_num = 2; // 一度に取得する数
                    var load_btn = $("#more-disp a");
                    var post_type = "<?php echo get_post_type(); ?>";
                    var templete_dir_uri = "<?php echo get_template_directory_uri(); ?>"+"/ajax-load.php";
                    var count_posts = "<?php echo $count_post->publish; ?>";
                    if(now_post_num >= count_posts){
                        $("#more-disp").hide();
                    }
                    $(function(){
                        $(document).on("click", "#more-disp a", function(){
                            $.ajax({
                                type: 'post',
                                url: templete_dir_uri+'/ajax-load.php',
                                data: {
                                    'now_post_num': now_post_num,
                                    'get_post_num': get_post_num,
                                    'post_type':post_type,
                                },
                                success: function(data){
                                    now_post_num = now_post_num + get_post_num;
                                    data = JSON.parse(data);
                                    $("#mason-wrap").append(data['html']);
                                    $("#more-disp").remove();
                                    console.log(data);
                                    if (!data['noDataFlg']){
                                        $("#mason-wrap").after('<div id="more-disp"><a href="javascript:void(0);">もっと見る</a></div>');
                                    }
                                }
                            });
                            return false;
                        });
                    });
                    </script>

●html

<ul id="mason-wrap" class="cl">
                            <?php
                            $counter = 0;
                            if(have_posts()):
                                while(have_posts()): the_post(); ?>
                                <li class="grid <?php echo ($counter == 0) ? 'first':'normal'; ?>">
                                    <a href="<?php the_permalink(); ?>">
                                        <div class="post-fig">
                                            <?php the_automatic_thumbnail_url(get_template_directory_uri()."/common/img/base/noimage_xl.png", "tmb_cut_760x450"); ?>
                                        </div>
                                        <p class="time"><?php the_time("Y.m.d"); ?></p>
                                        <h2><?php the_title(); ?></h2>
                                        <?php if($counter == 0): ?>
                                            <div class="ex"><?php echo nl2br(get_the_excerpt()); ?></div>
                                        <?php endif; ?>
                                        <div class="gray-switch">
                                            <span>詳しくはこちら</span>
                                        </div>
                                    </a>
                                </li>
                                <?php $counter++; ?>
                                <?php endwhile; ?>
                            <?php endif; ?>
                        </ul>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

試していませんが、これでどうでしょうか。

Recollects all item elements.
For frameworks like Angular and React, reloadItems may be useful to apply changes to the DOM to Masonry.
Masonry · Methods

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

$("#mason-wrap").append(data['html']);

この部分でajaxで取得したhtmlコードをappendしていると思いますが、追加されたコードにはmasonryは適用されていません。

DOMに対するJavascriptの操作は実行した瞬間にhtml上に存在するDOMに対して適応されます。

なので、一番最初はhtmlがあり、その後masonryが呼び出されるので正しく配置されます。

Ajax通信後、appendしたhtmlに対してはまだjavascriptが読み込まれていないので、append後、再度masonryを実行してあげるといいかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

-1

Ajaxをやめページングにすることで回避しました、

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20302questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16373questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    7188questions

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

  • Ajax

    1090questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。