Элемент сетки изотопа с положением: относительный

контекст

Я хочу построить сетку изотопной сетки с бесконечной загрузкой прокрутки.

потребности

Мне нужно дать относительную позицию .grid-item, чтобы расположить его дочерние элементы, position: absoluteсвязанные с родительским элементом .grid-item.

<div class="grid">
   <article class=".grid-item" ?>  <!-- position: relative -->
     <img>                         <!-- position: absolute -->
     <h2>                          <!-- position: absolute -->
   </article>
</div>

проблема

После бесконечной загрузки прокрутки обратный вызов запускается для сортировки макета с новыми элементами сетки: $('.grid').isotope('reloadItems').isotope();но эти позиции расположены в верхней части контейнера, .gridперекрывая предыдущие элементы сетки. Это поведение исправлено, давая статическую позицию в .grid-item, но мне действительно нужно относительное положение, как объяснялось ранее.

вопрос

Есть какой-то способ заставить Isotope работать с .grid-itemотносительно позиционированным?

Я не знаю, как построить кодекс с этим, но вот предварительный URL-адрес с моим проектом, демонстрируя это поведение. После бесконечной загрузки прокрутки новые элементы переходят в верхнюю часть .gridконтейнера:

https://stage.e451.net/

Благодаря!

css,layout,css-position,jquery-isotope,isotope,

0

Ответов: 1

0 принят

Еще один ответ «моя ошибка» :(

Обратный вызов Изотопа после бесконечной загрузки прокрутки не имеет viewportWidthобъявления переменной:

if (viewportWidth>=768) {
 $('.grid').isotope('reloadItems').isotope();
};

Таким образом, изотоп не управлял новыми элементами сетки после загрузки. Эта работа:

var viewportWidth = $(window).width();
if (viewportWidth>=768) {
 $('.grid').isotope('reloadItems').isotope();
};
CSS, макет, CSS-положение, JQuery-изотоп, изотоп,
Похожие вопросы
Яндекс.Метрика