Schemat pętli ciągłej siatki murarskiej

Question

Próbuję uzyskać ciągły efekt pętli na stronie zawierającej siatkę murarską.

Zasadniczo mam pełną siatkę murarską, którą chcę zapętlić w przewijaniu w górę lub w dół.

Obecnie mam to:

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

Można zobaczyć, co aktualnie Zebraliśmy tutaj:

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

myślę, że jestem blisko. Myślę, że najtrudniejsze jest to, że Masonry zaczyna od góry z wszystkimi przedmiotami w górnej części ekranu, i oczywiście nie jest to nawet na dole.

Jestem ciekawy, czy istnieje sposób, aby to zrobić, gdy rodzaj masonerii zaczyna się od środka i rozkłada elementy siatki w górę iw dół? Wiem, że mają opcję "originTop", która może działać, łącząc dwie siatki murarskie?

Jeśli to, co próbuję osiągnąć, jest mylące, po prostu daj mi znać, a spróbuję lepiej wyjaśnić.

zacząłem z niektórymi kodu pętli stąd: Continuous Looping Page (Not Infinite Scroll)

Answer 1

Nie używać dobry wzór do obliczenia przewijanie. See here, aby uzyskać więcej informacji.

Zobacz here dla działającego codepen.

Oto powiązany zmodyfikowany kod. Proszę zwrócić uwagę na -1 lub 1 w instrukcji przewijania, które uniemożliwiają nieskończoną pętle.!

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

Spróbuj

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

});