0

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

0 回答 0