Infinite (endless) scroll - masonry issue

[chechu]

Hey all,
I'm trying to integrate infinite (endless) scroll on my page, using this example: http://www.jquery4u.com/tutorials/jq...rolling-demos/ (demo 1).
But the page I'm working on does not show the masonry in the called pages. There must be a conflict between the masonry js files and isotope, as it all gets messed up. Please advise on how to get everything in masonry. Thanks!

Added: if you look at the called pages test2, test3,...,test6 seperately, then you'll see that they all show up in masonry. But with the infinite scroll, they don't.

Seems like there is a conflict in between the js files:
- https://ajax.googleapis.com/ajax/lib.../jquery.min.js
- http://lichaamengeest.be/js/jquery.isotope.min.js
- http://lichaamengeest.be/js/jquery.i...escroll.min.js
Can anyone see what's conflicting, please? Thanks.

[chechu]

Anyone, please?

[chechu]

Hey all,

Maybe a better explanation is needed.

I use a template that doesn't provide support anymore, where the masonry style is used in its portfolio.

What I'm trying to do is to have a part of the page tiled up masonry style, then have a bit of normal text, and then add another piece of masonry. Problem is that the second part of masonry doesn't tile up as it should, as you can see here. So there must be a conflict in the javascript that prevents itself from repeating the tiling up, I guess.

Could you please have a look at the coding of the page, and let me know how that could be resolved? At the end, I'd like to create infinite scrolling, like here (where the same issue is stopping the masonry continuation).

Any help would be highly appreciated!
Thanks.

[chechu]

Anyone having experience with infinite scroll combined with masonry, please?

[Boneff]

Well, as far as I can see - the way your HTML is structured it cannot work as you expect it.
As you can see in each "BOX" div the LI elements are successfully structured with masonry.

It's a bit tricky to explain now, but I think you should remove the "BOX" divs and leave only the UL and append more and more LI elements inside of the UL.
But do not create new UL each time - and that way the LI elements will be aligned with masonry.

If that doesn't work I will check the thread in a few days again.
I don't have much time now, wish you luck.

[chechu]

Hey Boneff,
Thanks a lot for your suggestions!
I made three adjustments:

1/ original code:

<div id="container">
<div class="box">
<ul id="thumbs">
<li class="col4 item">
</li>
</ul>
</div>
</div>
<nav id="page-nav">
<a href="#.htm"></a>
</nav>

changed into:

<ul id="thumbs">
<div id="container">
<li class="col4 item">
</li>
</div>
</ul>
<nav id="page-nav">
<a href="#.htm"></a>
</nav>

2/ I also removed all other coding from the second page, leaving just the <li>.

3/ And in the script, I changed ".box" into ".item" (on the page and in the infinitescroll.min.js), as the <li> are classed as "item".

This the result, where you can see that the masonry is coming up pefectly, but the page itself doesn't scroll anymore: http://lichaamengeest.be/Atest.htm
Almost there! Please advise on further steps. Thanks.