两个方向上的无限循环列

Question

我一直致力于两个专栏网站，当你滚动时：列A上升，列B下降。我实现了一个无限滚动，但我想知道的是：是否可以克隆/附加一个列到另一个列上，例如在一定的滚动长度：

滚出视图后：

• 列A框将移至B列的末尾
• B栏将移至A栏末尾

技术上仍然是无限的，但是将列从列到列循环 - 将一个放到另一个然后再返回。

这种做法是否不好，或者，在每列上使用无限滚动更好？什么让我沮丧，因为我是JS和jQuery的新手，是逻辑......以及实现这一目标的最佳方法是什么。

*图片仅举例来说，盒子的数量可能会高很多，例如每列10个。

到目前为止我的代码：http://jsfiddle.net/djsbaker/vqUq7/1/

我目前尝试克隆/追加：

      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 {

        }

      });

Answer 1

无限滚动。完成：the Fiddle http://jsfiddle.net/PgMUP/14/

你已经把一切都搞定了。

代码（加入一点）：

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

它的工作原理如图所示。闪烁是由于浏览器重排被触发引起的。一个更好的方法，而不是分离然后插入div，我相信只需交换两个div之间的属性。说出你在那里的任何东西，图像，文本，颜色，css类，只需用一个大的通用交换功能交换它。然后，由于容器本身将保持固定。

我添加了包含div并交换内部div，因此保留了列的大小结构，但这不起作用。