砌体网格连续循环滚动

Question

所以我试图在包含砌体网格的页面上实现连续循环效果.

基本上我有一个整页砌体网格,我想循环向上或向下滚动.

目前我有这个:

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

你可以看到我目前在这里放在一起的东西:

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

我想我很亲密.我认为困难的是,砌体从顶部开始,所有物品都冲到屏幕顶部,显然它甚至不在底部.

我很好奇是否有办法做到这一点,Masonry从中间开始并上下放置网格项目？我知道他们有一个"originTop"选项可以合并两个砌体网格吗？

如果我想要实现的目标令人困惑,请告诉我,我可以尝试更好地解释.

我从这里开始使用一些循环代码: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);
    }
});