Question

我正在使用jQuery Masonry（google it，它超级棒），用于我网站的动态布局。

出于某种原因，当我在执行.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。但如果你开始向下滚动abit，位置改变！

要解决此问题，我使用document.getElementById（anchor）.offsetTop“

所以尝试替换：

$target.offset().top

带

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

并查看是否适合您。

Answer 2

答案是，在使用jQuery ajax调用后，在DOM中的内容完全加载之前，IE砌体正在完成，所以这些盒子还没有最终的大小。

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

2 个答案: