Ajax附加的元素赢得't与masonry.js定位的相似元素一致

我正在这里写这个博客：http://insights.signetaccel.com/blog

这个列表页面上的博客摘要是使用一个名为masonry.js的脚本定位的。摘要的容器是".grid"，而摘要都被归类为".griditem"。

我有另一个脚本，它创建了一个无限滚动效果，请求url到下一页，找到所有.grid项，并将它们附加到页面上.grid容器的底部。

问题是masonry.js脚本将内联样式应用于.grid项div来定位它们。新添加的.grid项div不受masony.js的影响，因为它们是在页面加载后添加的。

如何让masonry.js脚本在添加新元素后将自己"重新应用"到页面上，以便将其应用到这些新元素上？

无限滚动脚本

(function($) {
$.fn.swoosh=function(loadingImgUrl,callback){
    if(!loadingImgUrl){
        loadingImgUrl="Loading...";
    }
    if (callback==null){
        callback=-1;
    }
    var postList=this;
    //SET VARIABLES
    var turnOff=false;
    var pageNumber=2;                                                    //toggle switch for infinite scroll.  shuts off when on last page    
    var urlArray=window.location.href.toString().split("/");                                //the array of url sections
    var blogUrl=urlArray[0]+"//"+urlArray[2]+"/"+urlArray[3]+"/";                       //the url for the blog
    var baseUrl=blogUrl+"page/";                                        //URL with the page number stripped off the end
    var postUrl="";                                                         //initialize postURL string                                                       
    var processing = false;                                                 //tells the scripts if there is already an ajax load happening
    //insert the loading bar at the end of the posts-list
    if(loadingImgUrl!="Loading..."){
        postList.parent().append('<div class="loading"><img src="'+loadingImgUrl+'"></div>');
    }
    else{
        postList.parent().append('<div class="loading">'+loadingImgUrl+'</div>');
    }
    $(".loading").hide();   //make sure loading bar is hidden
    $(document).scroll(function(){
        //kick out of function if it's already running, if it has been shut off, or if there is no 2nd page
        if (processing || turnOff || pageNumber==0){
            return false;
        }
        //when scrolling gets to the footer, start chugging!
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - $(".footer-container-wrapper").height()-150){
            processing = true;
                                                        //currently processessing, so don't call function again until done
            $(".loading").fadeIn(200);                  //fade in loading bar
            postUrl=baseUrl + pageNumber;               //calculate the page to load

            //AJAX CALL
            $.get(postUrl, function(data){
                //grab only post items from the loaded page
                var posts=$(data).find(".grid-item");
                //check that the loaded page has content
                if (posts.length > 0){
                    console.log(loadingImgUrl);
                    //fade out the loading bar, then attach the new items to the end of the list
                    $(".loading").fadeOut(200,function(){
                        posts.appendTo(".grid");
                        console.log(posts);
                    });
                    pageNumber++;                       //increment the page to load.
                    $(".next-posts-link").attr("href",baseUrl+pageNumber);
                }
                //if the loaded page doesn't have content, it means we have reached the end.
                else{
                    turnOff=true;
                    $(".next-posts-link").after('<div class="next-posts-link unactive">Next</div>');
                    $(".next-posts-link:not(.unactive)").remove();
                    $(".loading").fadeOut(200);
                }
                processing=false;                   //we are done processing, so set up for the next time
                setTimeout(function(){
                    twttr.widgets.load();
                    IN.parse();
                    FB.XFBML.parse();
                    gapi.plusone.go();
                     },350);
                 });  
             }
         });
     };
 })(jQuery);