jQuery кубы накладываются друг на друга иногда

Question

У меня есть сайт стиля pinterest и выполнен скрипт jquery, который равномерно распределяет кубы независимо от того, насколько большой браузер. По какой-то причине при загрузке страницы у нее есть некоторые перекрывающиеся кубы, которые раньше не существовали. Я разговаривал с парнем, который помог мне это сделать, и он сказал, что это, вероятно, из-за кода перед кодом, который создает блоки и позиционирует их. Он разбивает javascript.

Я думаю, что это из-за кода загрузки $ (window) .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;   
     }); 
    }); 

Answer 1

Я должен добавить это к концу моего сценария:

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

, а затем это до конца на прокрутки АЯКС нагрузки. Иногда jquery просто нуждается в небольшом ударе по лицу haha:

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