为什么我的动画后 IE 的边距不正确？

Question

我正在使用 jQuery Masonry（谷歌搜索，它超级棒）作为我网站的动态布局。

由于某种原因，当我在执行 .load() 事件后调用 Masonry 时，我没有得到确切的预期布局。

要明白我的意思，请转到 http://keepskatinbro.com，然后单击任意框将其展开，然后您会注意到布局已调整，以便关闭的框漂浮在打开的框周围。问题是打开的盒子下方的盒子与打开的盒子的底部重叠。

如果您调整浏览器的大小（恢复，然后最大化），您将看到正确的布局，因为当浏览器大小更改时 Masonry 会触发。请注意，调整浏览器大小后，打开的大框下方现在有一个边距。

当我动态打开并将内容注入到框中后，该边距需要存在。

但它在其他浏览器中运行得很好。

这是使一切发生的代码。几个函数，最后一个块调用所有函数，包括 masonize()。 Masonize() 本身工作得很好，但在回调中，我似乎遇到了所描述的问题：

function masonize(the_duration, callback) {
    $('#sort').masonry({
        singleMode: false,
        columnWidth: 175,
        itemSelector: undefined,
        appendedContent: undefined,
        saveOptions: true,
        resizeable: true,
        animate: true,
        animationOptions: {
            easing: 'swing',
            duration: the_duration
        }
    }, function() {
        $(this).css({ margin: '10px' });
        if (callback) {
            $(this).delay(the_duration)
            $(this).queue(function() {
                callback();
                $(this).dequeue();
            });
        }
    });
}
function set_position($target_item, top_offset, left_offset) {
    $target_item.css({ 'position':'absolute', 'top':top_offset+'px', 'left':left_offset+'px' });
}

function show_loader($target_box, callback) {
    var $target_box_img     = $target_box.find('img.wp-post-image'),
        $target_img_offset  = $target_box_img.offset(),
        $target_img_width   = $target_box_img.width(),
        $target_img_height  = $target_box_img.height();
    set_position( $ajaxSpinner,
        /*top*/  $target_img_offset.top + ($target_img_height / 2) - ($ajaxSpinner.width() / 2),
        /*left*/ $target_img_offset.left + ($target_img_width / 2) - ($ajaxSpinner.height() / 2)
    );
    $ajaxSpinner.fadeIn(function() {
        if (callback) { callback(); }
    });
}

function hide_loader(callback) {
    $ajaxSpinner.fadeOut(/*duration:*/0, function() {
        if (callback) { callback(); }
    });
}

function open_box($target_box, $target_path, $target_content, do_masonize, callback) {
    $target_box.find('.opened_view')
        .load(base + $target_path + ' ' + $target_content, function() {
            $target_box.find('.closed_view').addClass('hidden');
            $target_box.find('.thumbnail_wrapper').addClass('hidden');
            $target_box.find('.ajax_trigger_title').addClass('opened_post_title');
            $target_box.width(660);
            $target_box.append('<a class="ajax_trigger_close" id="close_' + $target_box.attr('id') + '" href="' + base + '/">Close</a>');
            if (do_masonize && callback) {
                masonize(masonize_duration, function(){
                    callback();
                });
            }
            else if (do_masonize && !callback) { masonize(masonize_duration); }
            else if (callback) { callback(); }
        });
}

function close_box($target_box, do_masonize, callback) {
    $target_box.find('.opened_view').html('');
    $target_box.width(310);
    $target_box.find('.closed_view').removeClass('hidden');
    $target_box.find('.thumbnail_wrapper').removeClass('hidden');
    $target_box.find('.ajax_trigger_title').removeClass('opened_post_title');
    $target_box.find('a.ajax_trigger_close').remove();

    if (do_masonize && callback) {
        masonize(masonize_duration, function(){
            callback();
        });
    }
    else if (do_masonize && !callback) { masonize(masonize_duration); }
    else if (callback) { callback(); }
}

function scroll_to($target, duration, top_margin, callback) { //scrolls the page to the $target. $target can be a jQuery object or the number of pixels to scroll from the top.
    if ($target instanceof $ || $target instanceof jQuery) {
        $('html, body').animate({
            scrollTop: $target.offset().top - top_margin
        }, duration, function() {
            if (callback) { callback(); }
        });
    }
//three ways to check for an integer below:
    else if ($target === parseInt($target,10)) { //else if integer
    //else if ( (typeof($target) == 'number') && ($target.toString().indexOf('.') == -1) ) { //else if integer
    //else if ( !isNaN(parseInt($target)) ) { //else if integer
        $('html, body').animate({
            scrollTop: $target
        }, duration, function() {
            if (callback) { callback(); }
        });
    }
}

$.address.change(function(event) {
    if (event.value !== '/' && $clicked_item) {
        if ($target_close) { //if not first item to be opened then close previously opened item.
            show_loader($target_open, function() {
                open_box($target_open, /*path:*/event.value, '.entry-content', /*masonize:*/false, function() {
                    close_box($target_close, /*masonize:*/true, function() {
                        scroll_to($target_open, /*duration:*/360, /*top-margin:*/80);
                    });
                    hide_loader();
                    $target_close = $target_open;
                });
            });
        }
        else { //otherwise just open target item since it is the first item to be opened.
            show_loader($target_open, function() {
                open_box($target_open, /*path:*/event.value, '.entry-content', /*masonize:*/false, function() {
                    hide_loader();
                    masonize(masonize_duration, function() {
                        scroll_to($target_open, /*duration:*/360, /*top-margin:*/80);
                    });
                    $target_close = $target_open;
                });
            });
        }
    }
    else if ( event.value === '/' && $clicked_item ) {
        if ( $clicked_item.hasClass('ajax_trigger_close') && $clicked_item.attr('id') !== 'home_link' ) {
            close_box($target_close, /*masonize:*/true);
            scroll_to(/*offset:*/0, /*duration:*/360);
        }
    }
});

知道可能是什么问题吗？先感谢您！

Answer 1

我读过有关此错误的信息，该错误可能会影响您（这是一个 IE 问题）：

“jQuery $(anchor).offset().top 似乎会在滚动发生后更改偏移位置计算。例如，如果您不要滚动容器，位置距离顶部 300，但是如果你开始向下滚动，位置会发生变化！

为了解决这个问题，我使用 document.getElementById(anchor).offsetTop"

所以尝试将： 替换

$target.offset().top

为

document.getElementById($target.attr('id')).offsetTop

看看这对你是否有效。

Answer 2

答案是，在 IE 中，在使用 jQuery ajax 调用后，在 DOM 中的内容完全加载之前，砌体就已完成，因此框还没有最终大小。