我正在此博客上工作：
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/