ランダムな要素の位置を生成し、JavaScript での重複を防止します

StackOverflow https://stackoverflow.com/questions/1286855

質問

ページにホルダー div があり、それぞれに 10 ピクセルのパディングを持つコラージュとしてランダムな位置に小さな画像をロードしたいと考えています。

画像が互いに重なったり、ホルダーの div が重ならないようにするにはどうすればよいですか?使用できるプラグインや機能はありますか?

これまでの私のコード:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#my_canvas img").each(
function(intIndex) {

var l = Math.floor(Math.random() * $("#my_canvas").width());
var t = Math.floor(Math.random() * $("#my_canvas").height());

$(this).css("left", l);
$(this).css("top", t);

$(this).bind(
    "click",
        function() {
            alert("l=" + l + " t=" + t);
        }
    );

}

);

}); 

   <style type="text/css">
    #my_canvas
    {
        background: #eee;
        border: black 1px solid;
        width: 800px;
        height: 400px;
    }
    #my_canvas img
    {
        padding: 10px;
        position:absolute;
    }
</style>

<div id="my_canvas">
    <img src="images/1.jpg" />
    <img src="images/9.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
    <img src="images/4.jpg" />
    <img src="images/5.jpg" />
    <img src="images/6.jpg" />
    <img src="images/7.jpg" />
    <img src="images/8.jpg" />
</div>
役に立ちましたか？

解決 3

私はプラグインが存在しないと思います。サンダーは、事前に定義されたdivのグリッドを作成し、ちょうどそれらのdiv要素にランダムに画像をロードすることにより、提案のように私はこれを実装します。なお、画像dimenssions /位置を計算するよりも簡単かつ迅速だとほとんど同じ仕事をしていません。ランダムなく、視覚的に良さそうではない：）

他のヒント

あなたは以前に対して置き、それぞれの新しいイメージの座標を比較することができるように、

、配列に選んだ座標を格納ます。

あなたが選んだ座標が前のイメージと重なった場合は、

、新しい座標を選びます。 1000回の試行を言うと、あなたがイメージを配置することはできません場合は、あなたが最初のイメージとやり直すように試行回数を制限します。

古い投稿を掘り出してきて申し訳ありませんが、最近同様の問題に遭遇し、完璧な解決策を見つけるまでに時間がかかりました。その解決策を共有したいと思います。これを達成するためのツリー的な方法があります。

1) 困難な道

自分で実装したい場合は、おそらくニーズに最も適した結果が得られるでしょう。ある程度の時間と多くのテストが必要ですが、実際にはそのような機能を自分で実装することはそれほど難しくありません。ランダム関数を使用できます Math.floor(Math.random() * Max) + Min 親要素内のランダムな位置を計算します。最初の要素を配置した後、要素の座標を配列などに保存する必要があります。次の要素を表示する前に、配列を使用して重なりがあるかどうかを確認できます。重なりがある場合は、新しい位置を計算するだけです。おそらくこれを行う最も効率的な方法ではありませんが、要素の量がそれほど多くない場合は非常にうまく機能します。しかし、これを実装した場合、これをより効率的にするためにアルゴリズムを最適化することもそれほど難しくないと確信しています。

2) 回避方法

これを達成するための 2 番目の方法は、最初の方法よりもはるかに簡単ですが、それほど柔軟ではありません。したがって、事前定義されたレイアウト、つまりある種のグリッドを使用する必要があります。したがって、100 個のグリッド ブロックを持つコンテナーがあると仮定します。つまり、要素を配置する要素は 100 個あるとします。これで、1 から 100 までの乱数を計算して、要素をグリッド コンテナーに追加することができます。重複を防ぐのは非常に簡単ですが、この方法が必ずしもニーズに合うとは限りません。

3) 最も簡単な方法かなり長い間検索しましたが、私のニーズに合ったプラグインは1つもありませんでした。そこで私は自分で作成したものを公開し、無料で使用できます。以下で見つけることができます manuelmaurer.at/randposplugin.php. 。かなり柔軟なので、これが目標を達成するのに最も簡単な方法だと思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top