Masonry Grid Continuous Loop Scroll

Question

So I'm trying to achieve a continuous loop effect on a page that contains a masonry grid.

Basically I have a full page masonry grid that I want to loop on scroll up or down.

Currently I have this:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer',
  percentPosition: true,
  transitionDuration: 0
});
$grid.imagesLoaded().progress(function(imgLoad, image) {
  var $item = $(image.img);
  $item.addClass('loaded');
  $grid.masonry('layout');
});

var origDocHeight = document.body.scrollHeight;

$(".grid").contents('.grid-item').clone().appendTo(".grid");
$grid.masonry('layout');

$(document).scroll(function() {
  var scrollWindowPos = $(document).scrollTop();
  console.log(scrollWindowPos);
  console.log(origDocHeight);
  if (scrollWindowPos >= origDocHeight) {
    $(document).scrollTop(0);
  } else if (scrollWindowPos == 0) {
    $(document).scrollTop(origDocHeight);
  }
});

You can see what I currently have put together here:

http://codepen.io/tenold/pen/eZbWOW

I think I'm close. I think the hard part is that Masonry starts at the top with all items flush to the top of the screen, and obviously it's not that even at the bottom.

I'm curious if there is a way to do this where Masonry kind of starts from the middle and lays out grid items up and down? I know they have an "originTop" option that could work maybe combining two masonry grids?

If what I'm trying to achieve is confusing, just please let me know and I can try to better explain.

I started with some of the loop code from here: Continuous Looping Page (Not Infinite Scroll)

Answer 1

You did not use the good formula to calculate your scrolling. See here for more details.

See here for the working codepen.

Here is the related modified code. Please take note of the -1 or 1 in the scroll instruction that prevent an infinite looping :

var scrollHeight = document.body.scrollHeight;

$(document).scroll(function() {
    var scrollTop = $(document).scrollTop();
    var viewHeight = $(window).height();
    console.log(scrollHeight)
    console.log(scrollTop)
    console.log(viewHeight)
    if (scrollHeight - scrollTop == viewHeight) {
        $(document).scrollTop(1);
    } else if (scrollTop == 0) {
        $(document).scrollTop(scrollHeight-viewHeight-1);
    }
});