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的冰塊重疊海誓山盟有時

回答

相關問題