Изотоп + WordPress — перекомпоновка после загрузки постов?

Я использую Изотоп с макетом кладки в WordPress, наряду с ImagesLoaded. Каждый пост является отдельным изотопом. Кажется, все работает хорошо, за исключением случаев, когда я загружаю что-то динамическое в посте, например, виджет Twitter или встроенное видео. Начальная высота элемента задается до загрузки сообщения / виджета. Как только он полностью загрузится, мне нужно, чтобы изотоп изменился, чтобы приспособиться к новой высоте.

Есть ли способ снова вызвать функцию макета после полной загрузки всех сообщений?

Вот мой изотопный код:

// init isotope
var $container = $('#cards');

$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer',
isFitWidth: true
}
});// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
$container.isotope('layout');
});// infinite scroll
$container.infinitescroll({
navSelector  : '.pagination',
nextSelector : '.pagination a',
itemSelector : '.item-scroll',
behavior: "twitter",
loading: {
finishedMsg: 'No more pages to load.'
}
},
function ( newElements ) {
var $newElems = jQuery( newElements ).hide(); // hide to begin with
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.fadeIn(); // fade in when ready
$container.isotope( 'appended', $newElems );
});
}
);

function onLayout() {
$container.infinitescroll('scroll');
}

Спасибо за помощь!

0

Решение

Попробуй это:

 var $container = $('#cards');
$container.imagesLoaded( function() {
// init isotope

$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer',
isFitWidth: true
}
});
});// infinite scroll
$container.infinitescroll({
navSelector  : '.pagination',
nextSelector : '.pagination a',
itemSelector : '.item-scroll',
behavior: "twitter",
loading: {
finishedMsg: 'No more pages to load.'
}
},
function ( newElements ) {
var $newElems = jQuery( newElements ).hide(); // hide to begin with
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.fadeIn(); // fade in when ready
$container.isotope( 'appended', $newElems ).isotope('layout');
});
}
);

function onLayout() {
$container.infinitescroll('scroll');
}
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]