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

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

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

问题是masonry.js脚本将内联样式应用于.grid-item div来放置它们。 masonry.js不会影响新添加的.grid-item div,因为它们是在页面加载后添加的。

追加新元素后才能使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);

最佳答案

您应该在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);
});

关于javascript - Ajax附加元素不会与masonry.js定位的相似元素保持一致,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34740926/

10-13 09:21