双向无限循环列

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，因此保留了列的大小结构，但这不起作用。