jQuery的冰块重叠海誓山盟有时

我有一个Pinterest的网站风格，并提出了jQuery的脚本，空间立方体均匀无论多么大的浏览器。由于页面加载的某些原因，它有一些以前不存在的重叠立方体。我和帮助我做出来的人谈过，他说这很可能是因为代码之前的代码会创建块并将它们定位。它崩溃的JavaScript。jQuery的冰块重叠海誓山盟有时

我想这是因为.scroll AJAX加载代码的$（窗口），但我似乎无法查明问题。我试着移动positionBlocks（）;周围没有什么变化。如果您在浏览器中加载页面，然后更改浏览器大小，那么它会正确定位它们，但显然当用户第一次到达时，我希望它看起来正确。

function setupBlocks() { 
    windowWidth = $(window).width(); 
    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*2))/2; 
    spaceLeft -= margin; 

    for(var i=0;i<colCount;i++){ 
     blocks.push(margin); 
    } 
    positionBlocks(); 
} 

function positionBlocks() { 
    $('.block').each(function(i){ 
     var min = Array.min(blocks); 
     var index = $.inArray(min, blocks); 
     var leftPos = margin+(index*(colWidth+margin)); 
     $(this).css({ 
      'left':(leftPos+spaceLeft)+'px', 
      'top':min+'px' 
     }); 
     blocks[index] = min+$(this).outerHeight()+margin; 
    }); 
} 

// Function to get the Min value in Array 
Array.min = function(array) { 
    return Math.min.apply(Math, array); 
}; 


var curlimit=<?php echo $curlimit; ?>; 
var totalnum=<?php echo $num_rws; ?>; 
var perpage=<?Php echo $perpage ?>; 
var working_already=false; 

$(document).ready(function() { 
//($(window).scrollTop() + $(window).height())> $(document).height()*0.8 
// old ($(window).scrollTop() + $(window).height() == $(document).height()) 

    $(window).resize(setupBlocks); 

    $(window).scroll(function() { 
     if(($(window).scrollTop() + $(window).height())> $(document).height()*0.90 && totalnum>0 && working_already==false ) { 
     } else return false; 

     working_already=true; 
     $("div#loading_bar").fadeIn("slow"); 
     curlimit=curlimit+perpage; 
     $("div#loading_data_location").html(""); 

     $.get('get_cubes.php?page=<?php echo $_GET['page'] ?>&curlimit='+curlimit, function(response) { 
      $("div#loading_data_location").html(response); 

      $("div#ColumnContainer").append($("div#loading_data_location").html()); 

      $("a#bigpic").fancybox({ 
       'onComplete' : imageLoadComplete, 
       'onClosed' : imageClosed, 
       'type': 'ajax' }); 

      if ($("div#loading_data_location").text()=="") 
       totalnum=0; 
      else 
       totalnum=<?php echo $num_rws; ?>; 

      $('.like:not(.liked)').click(like_box); 
      $('.save:not(.saved)').click(save_box); 
      $('.follow:not(.following)').click(follow); 
      $("div#loading_bar").fadeOut("fast"); 

      $("div#loading_data_location").html(''); 

      setupBlocks(); 
      working_already=false;   
     }); 
    });

来源

2012-05-15 Wakenn

你可以创建使用jsfiddle.com的例子，并添加jsfiddle链接到您的问题。 – Nation

这是最接近我能得到你： http://jsfiddle.net/heCP2/ 如果你想看到实际的问题，该网站的评论在我的HTML的顶部。感谢您的帮助。 – Wakenn

请检阅您的jsfiddle链接，因为我没有看到您的示例。 – Nation

我不得不把它添加到我的脚本的末尾：

<script language="javascript"> 
$(window).bind("load", function() { 
    setupBlocks(); 
}); 
</script>

，然后这的上滚动AJAX负荷结束。有时jquery只是需要一点点在脸上哈哈：

setTimeout(function(){setupBlocks();},100);

来源

2012-05-23 19:55:31 Wakenn

jQuery的冰块重叠海誓山盟有时

回答

相关问题