我有这个代码将图像放在列中(不是我的代码,而是修改过的)。我刚刚添加了一个无限滚动的脚本,以便保留图像的先前顺序,我将它们嵌套在页面div中,因此我遍历页面div然后继续迭代页面中的每个图像。奇怪的是,Firefox似乎将图像放置正确,但Chrome和safari只是添加了重复添加内容。任何人都有任何想法?
var colCount = 0;
var colWidth = 225;
var margin = 10;
var spaceLeft = 0;
var windowWidth = 0;
var blocks = [];
$(function(){
$(window).resize(setupBlocks);
});
function setupBlocks() {
windowWidth = $("#container").outerWidth();
blocks = [];
// Calculate the margin so the blocks are evenly spaced within the window
colCount = Math.floor(windowWidth /(colWidth + margin*2));
spaceLeft = (windowWidth - ((colWidth*colCount)+(margin*(colCount-1)))) / 2;
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.page').each(function(i){
$(this).children('.block').each(function(j){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = (index * (colWidth + margin));
$(this).css({
'left':(leftPos + spaceLeft) + 'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight() + margin;
});
});
}
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
//$('div#loadmoreajaxloader').show();
$.ajax({
url: "/more",
success: function(html){
if(html){
$("#container").append(html);
setupBlocks()
//$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});