Хорошо, вот в чем проблема, если я помещаю свою сетку автомобилей через чистый HTML, изотоп работает отлично, проблема начинается, когда я использую JS, чтобы заполнить свою сетку из объекта, в котором я храню все свои машины и их детали.Isotop никогда не работает, когда страница загружается, кажется, он занимает достаточно места только для одного ряда элементов, остальные находятся в верхней части первого ряда.Однако, когда я использую кнопки сортировки, элементы сортируются, и сетка корректируется и отображается правильно.вот мой код.
const displayCars = ((CreateCars) => {
const cars = CreateCars.cars;
const regCar = CreateCars.regCars;
console.log(regCar);
// car container
const inventory = document.querySelector('.inventory-container');
const inventorySort = document.querySelector('.filter-button-group');
// console.log(inventory);
document.addEventListener('DOMContentLoaded', () => {
inventory.innerHTML = '';
let output = '';
regCar.forEach((car) => {
output += ` <div class="col-12 mx-auto my-3 col-md-6 col-lg-4 ${car.trans} single-car">
<div class="card car-card">
<img src="${car.img}" alt="jag1" class="card-img-top car-img">
<div class="card-body">
<div class="car-info d-flex justify-content-between">
<!-- 1st child -->
<div class="car-text text-uppercase">
<h6 class="font-weight-bold">${car.make}</h6>
<h6>${car.model}</h6>
</div>
<!-- 2nd child -->
<h5 class="car-value align-self-center py-2 px-3">
$<span class="car-price">${car.price}</span>
</h5>
</div>
</div>
<!-- card footer -->
<div class="card-footer text-capitalize d-flex justify-content-between">
<p><span><i class="fas fa-car"></i></span> ${car.type}</p>
<p><span><i class="fas fa-cogs"></i></span> ${car.trans}</p>
<p><span><i class="fas fa-gas-pump"></i></span> ${car.gas}</p>
</div>
</div>
</div>`
});
//
inventorySort.addEventListener('click', (event) => {
console.log(event.target);
// if clicked within a div
$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue
});
});
})
//
inventory.innerHTML = output;
var $grid = $('.gridCars').isotope({
});
});