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

不要在文档就绪上运行$(window).resize()，而是在窗口加载时运行它。换句话说，改变

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

到

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

由于文档就绪等待直到所有DOM元素都到位，jQuery无法检测到正确的块大小和位置，因为图像未加载。图像加载后，尺寸会发生变化。如果你想尽快定位，请尝试指定图像的高度和宽度，这样当文档准备好（而不是加载窗口）时，jQuery可以获取所有图像大小。

Answer 2

当你写：

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

setupBlocks函数未被调用，这样就是：

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

现在您确定您的设置是在页面加载[fiddle]上运行的。

意外行为：绝对位置＆amp; $（窗口）.resize（）

2 个答案: