javascript - Ajax 附加元素不会与 masonry.js 定位的类似元素对齐

Question

我正在这个博客上工作: http://insights.signetaccel.com/blog

此列表页面上的博客摘要是使用名为 masonry.js 的脚本定位的。摘要的容器是“.grid”，而摘要都分类为“.grid-item”。

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

问题在于 masonry.js 脚本将内联样式应用于 .grid-item div 来定位它们。新附加的 .grid-item div 不受 masonry.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);

Answer 1

您应该在 posts.appendTo(".grid"); 之后 $.post 之后重新绑定(bind) masonry

//take your binding in a variable
var container =  $('.grid').masonry({
            // options
            itemSelector: '.grid-item',
            columnWidth: 200,
            columnWidth: '.grid-item',
            percentPosition: true
        });   

//do this on $.post  
$(".loading").fadeOut(200,function(){
      posts.appendTo(".grid");    
      console.log(posts);
       //changes made here in your code
       container.append(posts).masonry('appended', posts);
});