Я использую Изотоп с макетом кладки в 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');
}
Спасибо за помощь!
Попробуй это:
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');
}
Других решений пока нет …