14

我一直在研究两列网站，当您滚动时：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 {
    ..
  }
});
4

1 回答 1

7

无限滚动。完成：小提琴 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，因此保留了列的大小结构，但这不起作用。

于 2013-01-28T11:34:30.620 回答