砌体网格连续循环滚动

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

您没有使用好的公式来计算滚动。 See here 了解更多详情。

请参阅here 以获取工作代码笔。

这里是相关的修改代码。请注意滚动指令中防止无限循环的-1 或1：

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

Answer 2

试试这个

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

});