Nieskończona pętla kolumn w obu kierunkach

Question

Nieskończona pętla kolumn w obu kierunkach

Pracowałem na dwóch kolumnach strony internetowej, gdzie podczas przewijania: kolumna A idzie w górę i Kolumna B idzie w dół. Zaimplementowałem nieskończony zwój, ale zastanawiam się nad tym: czy można klonować / doczepiać jedną kolumnę do drugiej np. przy określonej długości przewijania:

Po przewinięciu z widoku:

pola w kolumnie A przesuwają się na koniec kolumny B
pola w kolumnie B zostaną przeniesione na koniec kolumny a

Technicznie wciąż nieskończona, ale zapętlona pudła od kolumny do kolumny-rozlewając się jeden do drugiego i z powrotem.

Czy to podejście jest złe, czy lepiej używać niekończącego się przewijania na każdej kolumnie? To, co mnie denerwuje, ponieważ jestem nowy w JS i jQuery, to logika...i jakie jest najlepsze podejście, aby to osiągnąć.

przykład ruchu kolumn

*obrazek na przykład ilość pól może być dużo wyższa np. 10 w każdej kolumnie.

Mój kod do tej pory: http://jsfiddle.net/djsbaker/vqUq7/1/

Mój aktualna próba klonowania / dołączania:

      var ele = document.getElementById("box");
      var arr = jQuery.makeArray(ele);
      var data = (ele)[0];

      $(window).scroll(function() {

        if ( $(window).scrollTop() >= 1000) {

          $(data).clone().appendTo('body');

        } else {

        }

      });

14

javascript jquery html multiple-columns infinite-scroll

Author: DBUK, 2013-01-22

Source

1 answers

score 7 · Accepted Answer

Nieskończone przewijanie. Done: The Fiddle http://jsfiddle.net/PgMUP/14/

Wszystko zaplanowałeś.

The code () :

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);
var ul = '#up-left'; 
var dr = '#down-right'; 
function crisscross() {
    $(ul).css('bottom', '-' + window.scrollY + 'px');
    $(dr).css('bottom', '-' + window.scrollY + 'px');
    var ulc = $(ul).children();
    var drc = $(dr).children();
    var corners = [ulc.first(),ulc.last(),drc.last(),drc.first()];
    if (window.scrollY > half_way ) {
        $(window).scrollTop(half_way - child_height);
        corners[2].appendTo(ul);    
        corners[0].prependTo(dr);
    } else if (window.scrollY < half_way - child_height) {
        $(window).scrollTop(half_way);
        corners[1].appendTo(dr);
        corners[3].prependTo(ul);
    }
}
$(window).scroll(crisscross);

Działa tak, jak sugeruje Twój diagram. Migotanie jest spowodowane wyzwalaniem reflow przeglądarki. Lepszą metodą, zamiast odłączania i wstawiania div-ów, byłoby po prostu Zamiana atrybutów pomiędzy dwoma div-ami. Powiedz, co tam masz, obrazy, tekst, kolory, klasy css, po prostu zamień je za pomocą dużej, uniwersalnej funkcji wymiany. Następnie, ponieważ kontenery same pozostaną stałe.

Dodałem zawierające Div I zamieniłem wewnętrzny div, więc struktura wielkości kolumn została zachowana, ale to nie zadziałało.