我正在为我的网站的动态布局使用 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);
}
}
});
知道可能是什么问题吗？先感谢您！