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

});

砌体网格连续循环滚动

2 个答案: