如何在 ajax 调用时初始化砌体

Question

我正在通过 facebook 图和使用砌体显示 facebook 帖子。默认砌体初始化：

$('#facebook-feed').masonry({
        itemSelector: '.grid-item',
        percentPosition: true
});

默认 Facebook 帖子：

$(document).ready(function() {

        var accessToken ='xxx';

        //$("#mainContainer").show();
        $.ajax({
            url: 'https://graph.facebook.com/v2.5/abc/posts?fields=full_picture,id,is_published,link,story,message,name,updated_time,description,from,source,caption,created_time,permalink_url,type,target&access_token=' + accessToken + '&limit=5',
            type: 'GET',

            success:function(result){
                $.each( result.data, function( index, value ) {
                    var link;
                    var imgSrc = '';
                    var name = '';
                    var message = '';
                    if(typeof(value.link) != "undefined" && value.link !== null) {
                            link = value.link;
                        } else {
                            link = value.permalink_url;
                        }
                        if(typeof(value.full_picture) != "undefined" && value.full_picture !== null) {
                            imgSrc = value.full_picture;
                        }
                        if(typeof(value.name) != "undefined" && value.name !== null) {
                            name = value.name;
                        }
                        if(typeof(value.message) != "undefined" && value.message !== null) {
                            message = value.message;
                        }
                    $("#facebook-feed").append(
                        '<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+
                            '<div class="thumbnail">'+
                            '<img src="'+imgSrc+'" alt="'+name+'" >'+
                            '<div class="caption">'+
                            '<h3>'+name+'</h3>'+
                            '<p>'+message+'</p>'+
                            '</div>'+
                            '</div>'+
                        '</a></div>'
                    );
                });
            },
            error:function() {
                $("#facebook-feed").html('Failed To Load Resource');
            }
        });
    });

现在我有加载更多提要按钮，用于根据限制加载更多提要。

$(document).on("click", "#load-more-feeds", function() {
        $.ajax({
            url: $("#hidden-next-feed").val(),
            type: 'GET',
            success: function(result) {
                $("#hidden-next-feed").val(result.paging.next);
                $.each( result.data, function( index, value ) {
                    var link;
                    var imgSrc = '';
                    var name = '';
                    var message = '';
                    if(typeof(value.link) != "undefined" && value.link !== null) {
                        link = value.link;
                    } else {
                        link = value.permalink_url;
                    }
                    if(typeof(value.full_picture) != "undefined" && value.full_picture !== null) {
                        imgSrc = value.full_picture;
                    }
                    if(typeof(value.name) != "undefined" && value.name !== null) {
                        name = value.name;
                    }
                    if(typeof(value.message) != "undefined" && value.message !== null) {
                        message = value.message;
                    }
                    var moreFeeds = '<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+
                        '<div class="thumbnail">'+
                        '<img src="'+imgSrc+'" alt="'+name+'" >'+
                        '<div class="caption">'+
                        '<h3>'+name+'</h3>'+
                        '<p>'+message+'</p>'+
                        '</div>'+
                        '</div>'+
                    '</a></div>';
                    var $moreFeeds = $( moreFeeds );
                    // Append new blocks
                    $("#facebook-feed").find("div.grid-item:last").after( $moreFeeds );
                    // Have Masonry position new blocks
                    $("#facebook-feed").find("div.grid-item:last").masonry( 'appended', $moreFeeds );
                    /*$("#facebook-feed").find("div.grid-item:last").after(
                        '<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+
                        '<div class="thumbnail">'+
                        '<img src="'+imgSrc+'" alt="'+name+'" >'+
                        '<div class="caption">'+
                        '<h3>'+name+'</h3>'+
                        '<p>'+message+'</p>'+
                        '</div>'+
                        '</div>'+
                    '</a></div>'
                    );*/
                })
            },
            error:function() {
                $("#facebook-feed").html('Failed To Load Resource');
            },
        })
    })

Facebook 帖子运行良好，但砌体无法正常工作。如何解决这个问题？提前致谢。

Answer 1

您可以使用 $('#facebook-feed').masonry('reloadItems'); 重新加载项目，但如果它不起作用，您可以使用 $('#facebook-feed').masonry('destroy'); 销毁砖石实例并再次重新初始化它。

您可以检查所有可用的方法here。

如何在 ajax 调用时初始化砌体

how to initialize masonry on ajax call

ajax

facebook

jquery-masonry