Scorrimento continuo in muratura griglia continua

Question

Quindi sto cercando di ottenere un effetto ad anello continuo su una pagina che contiene una griglia in muratura.

Fondamentalmente ho una griglia di muratura a pagina intera che desidero eseguire il ciclo di scorrimento verso l'alto o verso il basso.

Attualmente ho questo:

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

Si può vedere quello che attualmente messo insieme qui:

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

Credo di essere vicino. Penso che la parte difficile sia che la massoneria inizia in cima con tutti gli oggetti a filo nella parte superiore dello schermo, e ovviamente non è nemmeno nella parte inferiore.

Sono curioso di sapere se esiste un modo per fare ciò in cui la Massoneria inizia dal centro e presenta gli elementi della griglia su e giù? So che hanno un'opzione "originTop" che potrebbe funzionare forse combinando due griglie in muratura?

Se quello che sto cercando di ottenere è confuso, per favore fatemelo sapere e posso provare a spiegare meglio.

Ho iniziato con una parte del codice ciclo da qui: Continuous Looping Page (Not Infinite Scroll)

Answer 1

non hai usato la buona formula per calcolare il vostro scorrimento. See here per maggiori dettagli.

Vedere here per la codifica di lavoro.

Ecco il codice modificato correlato. Si prega di prendere nota del -1 o 1 nelle istruzioni di scorrimento che impediscono un loop infinito:.!?

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

Prova questa

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

});