Masonry + drupal, how to properly scope?

Question

Drupal

Hello.
Such a thing.
I'm using masonry Drupal 7 to display the Views of the grid.

The second day I'm trying to fasten a script for loading content that falls into the scope of the browser window.

pagers are not suitable, because I need to load not a new page, but simply hang up an event. And below is a page pager.

I'll try to be a little more detailed: I

use the animate library.
masonry-item container is styled
(this is the container from the masonry module that contains the node)

.masonry-item{
     opacity: 0; 
 }

included the library:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

and 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");
            }
        });
    });

it assigns the fadeInUp class to create animation using the animate library, but that's not the point.
everything is fine here, everything works.
The problem is that when the page is loaded, n number of nodes get into the scope. Those. they should already have the fadeInUp class (which does the animation) when the page loads.
I'm not strong in js, and I tried to use the code above only set $(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");
            }
        });
    });

and now the main problem. if you go here: dideas.ru , or rather go to the search page , and if you have a high screen resolution, you will see that the class is set to only 1 (sometimes 2-3 depending on the page) node. and when scrolling, the rest appear ... after digging
a little, I did the following. in the same script, I displayed using alert var imagePos, as I understood this position of the top container on the page and saw its top on each container when the page was loaded.
then I realized that by default the view displays all nodes as an unformated list and they go one after another in one column. and it turns out that the second node has imagePos +500px (the height of the container with the node) and does not fall into the viewport.
but if you set opacity: 1 for the container, then they are all displayed normally, but the animation is also crooked.
it turns out that Masonry somehow sets top which does not correspond to the "real", I do not understand how and what happens.
I would appreciate any help on this matter.

Thank you.

Answer 1

The problem is, when the page is loaded, n number of nodes get into the scope.

It seems that the problem is solved by inserting the script not before the elements that it processes, but after.
To get it there, it is usually enough to insert a PHP block into the basement of the view and enter the script there