0

我使用的是绝对定位布局（有点类似于 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 会很好地定位。有什么想法吗？

4

2 回答 2

0

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

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

到

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

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

于 2012-08-30T02:36:19.690 回答
0

当你写：

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

setupBlocks函数没有被调用，这样它是：

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

现在您确定您的设置在页面加载时运行 [小提琴]。

于 2012-08-30T02:46:55.140 回答