javascript - 意外行为 : absolute positiong & $(window). 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 的大小，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 ].