Проблема из-за того, что Isotope не дожидается загрузки изображения, которое формирует габариты, и начинает строить сетку.
Можно сделать на хаке соотношения сторон и абсолютно позиционированной картинки. Это нужно, чтобы габариты блоков изначально были просчитаны с помощью CSS и не зависели от скорости прогрузки картинок. В итоге, у Isotope будет вся нужная информация заранее. И ошибка в расчетах из-за отсутствия габаритов не будет иметь место.
Вот рабочий пример. Для пущего эффекта вообще с твоей картинкой и адаптивностью. Сжимай окно — все будет адаптироваться и пересчитываться. И это с учетом абсолютно позиционированной картинки внутри и flex-разметкой:
.grid {
display: flex;
flex-flow: row wrap;
}
.element-item {
flex: 0 0;
width: calc(20% - 10px);
margin: 0 0 10px 0;
position: relative;
}
.element-item:before {
/* формирователь соотношения сторон + задает габариты, которые будет считать Isotope */
content: "";
padding-bottom: 141.3242%; /* процентное соотношение сторон картинок */
display: block;
}
.element-item img {
/* картинка на абсолюте, как видишь */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.element-item p,
.element-item h3 {
/* скрываем тексты внутри, они для сортировки нужен только (код инициализации из их официального примера просто */
display: none;
}
/* адаптивность */
@media (min-width: 768px) and (max-width: 1200px) {
.element-item {
width: calc(25% - 10px);
}
}
@media (min-width: 400px) and (max-width: 767px) {
.element-item {
width: calc(33.333% - 10px);
}
}
@media (max-width: 399px) {
.element-item {
width: calc(50% - 10px);
}
}
