Всем привет.
Такое дело.
Использую
masonry Drupal 7 для вывода Views сетки.
Второй день пытаюсь прикрутить скрипт для подгрузки контента который попадает в область видимости окна браузера.
пейдежры не подходят, т.к. мне нужно подгрузить не новую страницу, а просто повесить событие.а ниже постраничный пейджер.
Постараюсь немного подробней:
использую
animate библиотеку.
для контейнера masonry-item установлен стиль
(это контейнер от модуля masonry в котором содержится нода)
.masonry-item{
opacity: 0;
}
подключил библиотеку:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
и скрипт
$(window).scroll(function () {
$('.masonry-item').each(function () {
var imagePos = $(this).offset().top;
var bottomOfWindow = $(window).scrollTop() + $(window).height();
if (imagePos <= bottomOfWindow ) {
$(this).addClass("fadeInUp");
}
});
});
он назначает класс fadeInUp для создания анимации с помощью библиотеки animate, но суть не в этом.
тут все хорошо, все работает.
Проблема вот в чем, при загрузке страницы в область видимости попадает n число нод. Т.е. они должны при загрузке страницы уже иметь класс fadeInUp (который и делает анимацию).
в js я не силен, и попробовал использовать код выше только установть $(document).ready
$(document).ready(function () {
$('.masonry-item').each(function () {
var imagePos = $(this).offset().top;
var bottomOfWindow = $(window).scrollTop() + $(window).height();
if (imagePos <= bottomOfWindow ) {
$(this).addClass("fadeInUp");
}
});
});
а теперь главная проблема. если зайдете сюда:
dideas.ru, а лучше на
страницу поиска , и если у вас высокое разрешение экрана, то вы увидите что класс установился только на 1 (иногда на 2-3 в зависимости от страницы) ноду. а при скроле появляются остальные...
поковырявшись немного, сделал следующее. в этом же скрипте вывел с помощью alert var imagePos, как я понял это положение top контейнера на странице и увидел на каждый контейнер его top при загрузке страницы.
тут я понял что по умолчанию вьюха выводит все ноды как unformated list и они идут друг за другом в одну колонку. и получается что вторая нода имеет imagePos +500px(высота контейнера с нодой) и не попадает во вьюпорт.
а вот если поставить opacity: 1 для контейнера, то они все отображаються нормально, но при этом анимация происходит так же криво.
получается Masonry какимто образом устанавливает top который не соответствует "реальному", не пойму как и что происходит.
Буду признателен за любую помощь в этом вопросе.
Спасибо.
