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