Я создал бесконечную прокрутку, которая генерирует новый набор изображений, когда доходит до конца документа. Я хочу, чтобы эта бесконечная прокрутка показывала изображения на разной высоте, но я хочу, чтобы она останавливалась после загрузки всех изображений. Вот кодеин: https://codepen.io/MakaylaElizabeth/pen/QWLYqRp
Вот часть JS:
function GenerateItems(){
var items = '';
for(var i=0; i < Imgs1.length; i++){
items += '<div class="grid-item c'+(2)+'" ><img src="'+Imgs1[i%Imgs1.length]+'" /></div>';
}
for(var i=0; i < Imgs2.length; i++){
items += '<div class="grid-item c'+(1)+'" ><img src="'+Imgs2[i%Imgs2.length]+'" /></div>';
}
for(var i=0; i < Imgs3.length; i++){
items += '<div class="grid-item c'+(0)+'" ><img src="'+Imgs3[i%Imgs3.length]+'" /></div>';
}
return $(items);
}
/*SimpleInfiniteScroll */
function Infinite(e){
if((e.type == 'scroll') || e.type == 'click'){
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var bottom = top + $(window).height();
var docBottom = $(document).height();
if(bottom + 10 >= docBottom){
$grid.revealItems(GenerateItems());
}
}
}
$grid.revealItems(GenerateItems());
$(document).on('click','.filter-item',function(){
$('.filter-item.active').removeClass('active');
$(this).addClass('active');
var f = $(this).data('f');
console.log(f);
$grid.find('.grid-item');
$grid.isotope({filter: f});
});
$(window).scroll(Infinite);
})
Я пытался сломать функцию создания элементов после каждого цикла for и не имел результатов. Пожалуйста, дайте мне знать, если я могу предоставить дополнительную информацию. Спасибо.
