0

100% 内に含まれる、ページの周りに散発的に (最終的には画像を含む) div の負荷全体をランダムに配置しようとしています。問題は、div をオーバーラップさせたくないということです。また、すべての div は画像に応じて異なるサイズになります。
私が現在持っている方法
：（ここでもjsfiddle http://jsfiddle.net/2z4rK/）

        function randomFromTo(from, to){
            return Math.floor(Math.random() * (to - from + 1) + from);
        }

        function moveRandom() {
            var cPos = $('#block-container').offset();
            var cHeight = $('#block-container').height();
            var cWidth = $('#block-container').width();

            var pad = parseInt($('#block-container').css('padding-top').replace('px', ''));

            var bHeight = $('.block').height();
            var bWidth = $('.block').width();

            maxY = cPos.top + cHeight - bHeight - pad;
            maxX = cPos.left + cWidth - bWidth - pad;

            minY = cPos.top + pad;
            minX = cPos.left + pad;



      $('.block').each(function() {

              newY = randomFromTo(minY, maxY);
              newX = randomFromTo(minX, maxX);

        $(this).animate({
                  top: newY,
                  left: newX
                  }, 500, function() {
              });
      });
        }

moveRandom();

これは問題ありませんが、div が重なっていて、すべて同じサイズにする必要があるようです。div はクライアントによって動的に追加されるため、完全に自己完結型にする必要があります。これは、この現在の方法が失敗すると思われる場所です。div をランダムに配置する方法はありますか?
私が達成しようとしていることの良い例: http://www.jormamueller.com

4

2 に答える 2

0

私はあなたのためにコードを書くつもりはありません、ただあなたに概要を与えます：

  • 各長方形の左上隅と右下隅の座標を作成し（配列またはオブジェクトのいずれかに格納します）、座標の配列に追加します。

  • 新しい長方形を生成するたびに、その4つの角の座標のいずれかが他の長方形の左上隅よりも大きく、他の長方形の右下隅よりも小さいかどうかを確認します（したがって、いずれかの角が内にあるかどうかを確認します）その他の長方形）。

  • そうでない場合は、長方形の新しいランダム座標を生成します。

はっきりしない場合はコメントできます。

于 2013-03-09T00:25:45.883 に答える
0

リンクしたサイトは、次の手法を使用しています。

  • ブラウザ ウィンドウとdivを持つグリッド コンテナがあります。widthrelative position
  • 画像ごとにdiv、absolute position. それぞれdivにポジションがfull widthあります。それぞれのプロパティは、以前のすべての div の高さの合計です。random lefttopdiv

私があなただったら、divタグを使用して空のセルを持つ表のようなグリッドを作成し、それらのセルに画像をランダムに配置します。

これは、すべての画像ソースと詳細を配列に入れ、すべてのセル ID を別の配列に入れることで実現できます。次に、両方の配列をシャッフルして、1 つの画像をランダムなセルに割り当てることができます。

于 2013-03-09T00:48:35.593 に答える