Блог

Главная - Вопросы по программированию - jQuery Masonry не обновляет высоту контейнера

jQuery Masonry не обновляет высоту контейнера

#jquery #jquery-masonry

#jquery #jquery-masonry

Вопрос:

Использование кладки Jquery, которая работает нормально. Однако у меня небольшая проблема. Макет выглядит так:

 <div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

После инициализации кладки после загрузки страницы с:

 $('.container').masonry ( {        
    itemSelector: '.box'
});

я пытаюсь использовать вызов Ajax для замены ящиков на другие.
перед использованием ajax я использую:

 $('.container').masonry( 'remove', $('.container .box'));

и после его загрузки :

 $('.container').prepend(data).masonry( 'appended', data );

он загружает все новые ящики и автоматически позиционирует их с помощью masonry, но также оставляет большой зазор в верхней части контейнера. Новые ящики добавляются не в верхней части контейнера, а точно в том же месте, где заканчивались удаленные ящики.
Я пытался использовать некоторые функции masonry, такие как reloadItems, layout и т. Д., Но ничего не помогает : (
Кто-нибудь знает решение моей проблемы?

Ответ №1:

Вы смешиваете два противоположных метода — добавление и добавление. Кажется, что Masonry должен точно знать, с какой стороны вы добавляете свои элементы. Взгляните на пример документов:

http://masonry.desandro.com/methods.html#prepended

При первом нажатии давайте просто попробуем изменить ваш код на:

 $('.container').prepend(data).masonry( 'prepended', data );

Комментарии:

1. Спасибо за помощь. я изменил ваш код, и теперь у меня есть пробел, но в нижней части всех полей. Похоже, что Masonry считает, что все еще есть несколько ящиков, и вычисляет высоту контейнера, как если бы они все еще были там, даже если они не отображаются. Я пытался вручную установить высоту содержимого, но это не помогло

2. У вас есть это где-нибудь в Сети? Я не могу разобраться в проблеме, не касаясь ее.

Ответ №2:

Я только что столкнулся с этой проблемой, мое решение состояло в том, чтобы:

1 Удалите исходные элементы.

2 Удалите функциональность masonry для элемента.

3 Повторно инициализируйте функциональность masonry для элемента.

4 Затем добавьте новые элементы, используя prepend .

 //These were defined globally.
var masonryOptions = {
   columnWidth: 450,
   itemSelector: '.feature-block',
   gutter: 20
};

$grid = $('.masonry-grid').masonry(masonryOptions);

function clear() {
   $grid.masonry('remove', $grid.find('.feature-block'));
   $grid.masonry('destroy');
   $grid = $('.masonry-grid').masonry(masonryOptions);
}
Метки: