Вот код который подгружает все карты на главную как сделать чтоб выводилась только видимая часть экрана
function showCategories(data,cool){
let j = cool;
//console.log(j);
let out = '';
for (let i = 0; i < data.length; i++){
if (data[i]['gsx$show']['$t'] != 0){
if(data[i]['gsx$category']['$t'] == j){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="square" src="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(j == 0){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="square" src="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(data[i]['gsx$type']['$t'] == j){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="square" src="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(j == 1){
}
}
}
return out;
}
