JQuery在Firefox和Chrome / Safari中表现不同

时间:2012-12-18 21:26:30

标签: javascript jquery

我有这个代码将图像放在列中(不是我的代码,而是修改过的)。我刚刚添加了一个无限滚动的脚本,以便保留图像的先前顺序,我将它们嵌套在页面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>');
      }
    }
  });
}
});

0 个答案:

没有答案