14

私は 2 列の Web サイトに取り組んできました。スクロールすると、列 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をデタッチしてから挿入するのではなく、2つのdiv間で属性を交換するだけの方が良い方法だと思います。画像、テキスト、色、cssクラスなど、そこにあるものは何でも言ってください。それを大きな万能スワップ関数と交換するだけです。その後、コンテナ自体は固定されたままになります。

包含divを追加し、内部divをスワップアウトしたため、列のサイズ構造は保持されましたが、これは機能しませんでした。

于 2013-01-28T11:34:30.620 に答える