Я использую jQuery Masonry (погуглите, это супер круто) для динамического макета моего сайта.
По какой-то причине, когда я вызываю Masonry после выполнения события .load(), я не получаю именно тот макет, который ожидался.
Чтобы понять, что я имею в виду, перейдите на 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);
}
}
});
Любая идея, в чем может быть проблема? Заранее спасибо!