5

ページにホルダーdivがあり、小さな画像をランダムな位置に、それぞれに10pxのパディングがあるコラージュとしてロードします。

画像が互いに重ならないように、またはホルダー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>
4

3 に答える 3

3

選択した座標を配列に保存して、配置した新しい各画像の座標を前の画像と比較できるようにします。

選択した座標が前の画像と重なる場合は、新しい座標を選択します。試行回数を制限して、たとえば1000回の試行で画像を配置できない場合は、最初の画像からやり直すようにします。

于 2009-08-17T09:09:33.007 に答える
2

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

1）難しい方法

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

2）回避策

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

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

于 2017-04-11T11:57:25.257 に答える
0

プラグインはないと思います。事前定義されたdivグリッドを作成し、それらのdivにランダムな画像をロードすることで、Sanderが提案したようにこれを実装します。画像の寸法/位置を計算するよりも簡単で高速で、ほとんど同じ仕事をします。ランダムではありませんが、視覚的には見栄えがします:)

于 2009-08-18T08:23:16.890 に答える