0

絶対配置レイアウトを使用しています（ピンタレストに少し似ています）

そのため、window.resize でも位置を再計算する必要があります。このイベントは dom ready では発生しないため、手動で行います。

$(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
});

これで、セットアップがページの読み込み時に実行されることを確認できました [ fiddle ]。

于 2012-08-30T02:46:55.140 に答える