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)

Shon

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

Astigmatism

Tested with Mozilla 46.0 – Astigmatism

Sorry about renaming your variables – Astigmatism

Hum? Can you elaborate? – Astigmatism

your refers to.? – Watchcase

So I'm trying to get it to be a continuous scroll up and down with no hiccups or blank spaces. In your example, on page landing, I can't scroll up first. Also, scrolling down I get blank spots before it loops: i.imgur.com/lZ4pTNw.png. I want it to be a continuous fluid grid up or down. – Shon

Answer 2

Try 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() {
  if($(window).scrollTop() + $(window).height() > $(document).height()) {
      $('html, body').animate({
    scrollTop: 0
  }, 100);
   }

});

Watchcase

Your solution does not work both way, as intended in the question. – Astigmatism

The 100px difference prevent the user from seeing the bottom of the page, but I guess this setting is free – Astigmatism

There is still no both ways, and unfortunately it doesn't work anymore :/ (at least with mozilla 46.0) – Astigmatism