Question

我正在使用此方法使用Ajax加载更多帖子：link。

我也在使用Masonry作为帖子布局。

Masonry适用于第一组帖子，但不适用于点击加载更多帖子后附加的下一组帖子。

如何在加载更多帖子后让砌体工作？

源代码示例;的index.php

        <!-- Post Layout -->
    <div class="posts <?php echo $home_style; ?>">

        <!-- Normal Post -->
        <?php

            if ( have_posts() ) :

            /* Start the Loop */
            while ( have_posts() ) : the_post();

                /* Home Layout */
                if($home_style === 'standard') {
                    get_template_part( 'inc/posts/content' );
                } else {
                    get_template_part( 'inc/posts/content', 'grid' );
                }   

            endwhile;

            else :

                get_template_part( 'template-parts/content', 'none' );

            endif; 

        ?>

        <?php
        global $wp_query; // you can remove this line if everything works for you

        // don't display the button if there are not enough posts
        if (  $wp_query->max_num_pages > 1 )
            echo '<div class="misha_loadmore grid-post">More posts</div>'; // you can use <a> as well
        ?>


    </div>
    <!-- Post Layout / END -->

Ajax代码;

jQuery(function($){
$('.misha_loadmore').click(function(){

    var button = $(this),
        data = {
        'action': 'loadmore',
        'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
        'page' : misha_loadmore_params.current_page
    };

    $.ajax({
        url : misha_loadmore_params.ajaxurl, // AJAX handler
        data : data,
        type : 'POST',
        beforeSend : function ( xhr ) {
            button.text('Loading...'); // change the button text, you can also add a preloader image
        },
        success : function( data ){
            if( data ) { 
                button.text( 'More posts' ).prev().before(data); // insert new posts
                misha_loadmore_params.current_page++;

                if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) 
                    button.remove(); // if last page, remove the button

                // you can also fire the "post-load" event here if you use a plugin that requires it
                // $( document.body ).trigger( 'post-load' );
            } else {
                button.remove(); // if no data, remove the button as well
            }
        }
    });
});

}）;

Masonry script.js

    /* Masonary Grid */
$('.home-grid').masonry({
    itemSelector: '.grid-post',
    percentPosition: true,
    gutter: 33
});

Answer 1

在大多数JavaScript库中，如果在初始化插件后更改DOM（HTML），则必须告诉库已经进行了更改。大多数库将包含一个函数或侦听一个告诉它更新的事件。在Masonry的情况下，看起来这个函数是reloadItems。

在您的情况下，看起来您必须在执行{ "adult": false, "backdrop_path": "/gBmrsugfWpiXRh13Vo3j0WW55qD.jpg", "belongs_to_collection": { "id": 328, "name": "Jurassic Park Collection", "poster_path": "/qIm2nHXLpBBdMxi8dvfrnDkBUDh.jpg", "backdrop_path": "/pJjIH9QN0OkHFV9eue6XfRVnPkr.jpg" }, "budget": 260000000, "genres": [ { "id": 28, "name": "Action" }, { "id": 12, "name": "Adventure" }, { "id": 878, "name": "Science Fiction" } ], "homepage": "http://www.jurassicworld.com/", "id": 351286, "imdb_id": "tt4881806", "original_language": "en", "original_title": "Jurassic World: Fallen Kingdom", "overview": "A volcanic eruption threatens the remaining dinosaurs on the island of Isla Nublar, where the creatures have freely roamed for several years after the demise of an animal theme park known as Jurassic World. Claire Dearing, the former park manager, has now founded the Dinosaur Protection Group, an organization dedicated to protecting the dinosaurs. To help with her cause, Claire has recruited Owen Grady, a former dinosaur trainer who worked at the park, to prevent the extinction of the dinosaurs once again.", "popularity": 250.012321, "poster_path": "/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg", "production_companies": [ { "id": 56, "logo_path": "/cEaxANEisCqeEoRvODv2dO1I0iI.png", "name": "Amblin Entertainment", "origin_country": "US" }, { "id": 8111, "logo_path": null, "name": "Apaches Entertainment", "origin_country": "" }, { "id": 923, "logo_path": "/5UQsZrfbfG2dYJbx8DxfoTr2Bvu.png", "name": "Legendary Entertainment", "origin_country": "US" }, { "id": 103204, "logo_path": null, "name": "Perfect World Pictures", "origin_country": "US" }, { "id": 33, "logo_path": "/8lvHyhjr8oUKOOy2dKXoALWKdp0.png", "name": "Universal Pictures", "origin_country": "US" } ], "production_countries": [ { "iso_3166_1": "US", "name": "United States of America" } ], "release_date": "2018-06-06", "revenue": 0, "runtime": 128, "spoken_languages": [ { "iso_639_1": "en", "name": "English" } ], "status": "Released", "tagline": "The park is gone", "title": "Jurassic World: Fallen Kingdom", "video": false, "vote_average": 6.7, "vote_count": 642 }后直接致电SELECT ledger.ID, ledger.[Expense:(type)], ledger.[Fund allotment], ledger.Amount, (Select Amount From ledger Where ledger.ID = (Select Min(ID) From Ledger))- Nz((Select Sum(T.Amount) From ledger As T Where T.ID > (Select Min(ID) From Ledger) And T.ID <= ledger.ID), 0) As Balance FROM ledger。这是我的猜测，我无法测试它。请尝试一下，让我知道它是怎么回事。

完整代码：

$('.home-grid').masonry('reloadItems');

通过ajax加载更多帖子后，砌体视图无法正常工作

1 个答案: