Question

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

此列表页面上的博客摘要使用名为masonry.js的脚本进行定位。摘要的容器是＆＃34; .grid＆＃34;，而摘要都被分类为＆＃34; .grid-item＆＃34;。

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

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

如何让masonry.js脚本重新申请＆＃34;重新申请＆＃34;在添加新元素之后将其自身添加到页面中以使其适用于这些新元素吗？

无限滚动脚本

(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

在rebind之后的masonry之后你应该$.post posts.appendTo(".grid");

//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);
});

附加的Ajax元素不会与masonry.js定位的相同元素一致

1 个答案: