Masonry Grid Continuous Loop Scroll

Question

Also versuche ich einen kontinuierlichen Loop-Effekt auf einer Seite, die ein Mauergitter enthält.

Grundsätzlich habe ich ein ganzseitiges Mauergitter, das ich auf Scroll-up oder -down loopen möchte.

Zur Zeit habe ich dies:

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

Sie können sehen, was ich hier zusammen zur Zeit setzen:

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

Ich glaube, ich bin in der Nähe. Ich denke, der schwierigste Teil ist, dass die Freimaurerei an der Spitze beginnt und alle Gegenstände bündig mit der Oberseite des Bildschirms abschließen, und offensichtlich ist das nicht einmal am unteren Rand.

Ich bin neugierig, ob es einen Weg gibt, dies zu tun, wo die Mauerwerkart von der Mitte aus beginnt und Gitterelemente auf und ab legt? Ich weiß, dass sie eine Option haben, die funktionieren könnte, vielleicht zwei Mauergitter kombinierend?

Wenn das, was ich versuche zu erreichen, verwirrend ist, bitte lass es mich wissen und ich kann versuchen, es besser zu erklären.

ich von hier aus mit einigen der Schleife Code gestartet: Continuous Looping Page (Not Infinite Scroll)

Answer 1

Sie nicht die gute Formel Ihrer Scrollen berechnen verwendet haben. See here für weitere Details.

Siehe here für den arbeitenden Codepen.

Hier ist der entsprechende modifizierte Code. Bitte beachten Sie die -1 oder 1 in der Scroll-Befehl, der eine Endlosschleife zu verhindern.!?

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

Versuchen Sie, diese

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

});