意外行爲：絕對positiong＆$（窗口）.resize（）

Question

我使用的是絕對定位佈局（類似位Pinterest的）

所以我還需要重新計算window.resize的位置：而且因爲這事件不是在dom準備好時觸發的，我手動執行。現在

$(document).ready(function(){ 
    $(window).resize(); 
}); 
$(window).resize(setupBlocks); 

，此功能setupBlocks的HTML元素的尺寸檢查，計算新的位置

function setupBlocks() { 
    if ($('.fancyContent').length > 0) { 
     if ($('.rightFixed').length > 0) $('.fancyContent').width($(window).width() - 320) 
     windowWidth = $('.fancyContent').width(); 
     //colWidth = $('.fancyContent .widgetHelp').outerWidth(); 
     blocks = []; 
     //console.log(blocks); 
     colCount = Math.floor(windowWidth/(colWidth + margin * 2)); 
     for (var i = 0; i < colCount; i++) { 
      blocks.push(margin); 
     } 
     $('.fancyContent .widgetHelp').css({ 
      'position': 'absolute', 
      'width': colWidth 
     }); 
     positionBlocks(); 
     var topFooter = $('.fancyContent .widgetHelp:last').offset().top + 350; 
     $('footer').css({ 
      'position': 'absolute', 
      'top': topFooter 
     }); 
     //console.log(topFooter); 
     $('.fancyContent').css('visibility', 'visible'); 
     $('#load').remove(); 
     //console.log($('#load').length); 
    } 
} 

function positionBlocks() { 
    $('.fancyContent .widgetHelp').each(function() { 

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

意外的是，因爲預計執行。但是，直到窗口調整大小後，職位計算得並不是很好。然後這些職位變得確切。

我知道這是一個遠射。但任何想法爲什麼它可能會有不同的表現？

它的更好，如果你測試自己：http://209.51.221.243/integracion/login.php

當頁面加載時，div的幾乎細（其中有些是垂直接觸），但如果調整股利的div得到很好地定位。任何思想？

Answer 1

當你寫：

$(document).ready(function(){ 
    $(window).resize(); 
}); 

setupBlocks功能不叫，這種方式是：

$(document).ready(function(){ 
    $(window).on('resize', setupBlocks); // window listens for resize events 
    $(window).resize(); // fire window resize 
}); 

現在你肯定你的設置是在頁面加載運行[fiddle。

Answer 2

而不是運行文檔就緒$(window).resize()，運行它在窗口加載。換句話說改變

$(document).ready(function(){ 
    $(window).resize(); 
}); 

到

$(window).load(function(){ 
    $(window).resize(); 
}); 

由於文件準備只是等待，直到所有的DOM元素到位，jQuery的不能檢測到正確的塊大小和位置，因爲圖像不是活得t加載。圖像加載後，尺寸會發生變化。如果你想盡快將事物定位，請嘗試爲圖像指定高度和寬度，因此當文檔準備就緒（而不是加載窗口）時，jQuery可以獲取所有圖像大小。