两个方向上的无限循环列

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

无限滚动.完成:小提琴http://jsfiddle.net/PgMUP/14/

你把一切都搞定了.

代码(neatened up):

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