Generieren Zufallselement Position und verhindern in JavaScript überlappende

Question

Ich habe einen Halter div auf der Seite, wo ich kleine Bilder in auf zufällige Position als Collage mit 10px padding auf jedem laden möchten.

Wie kann ich sicherstellen, dass die Bilder sich nie oder Halter div überlappen? Gibt es ein Plugin oder eine Funktion, die ich verwenden könnte?

Mein Code so weit:

<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>

Answer 1

Ich denke, es kein Plugin ist. Ich werde diese wie Sander, indem vordefinierte div Raster vorgeschlagen implementieren und nur zufällige Bilder auf diese divs geladen. Es ist einfacher und schneller als Bild Berechnung dimenssions / Positionen und macht ziemlich genau die gleiche Arbeit. Nicht zufällig, aber optisch sieht gut aus:)

Answer 2

Speichern Sie die aufgenommenen Koordinaten in einem Array, so dass Sie die Koordinaten jedes neue Bild vergleichen, können Sie den vorherigen Platz gegen.

Wenn die Koordinaten, die Sie nahm ein vorheriges Bild überlappt, neue Koordinaten wählen. Beschränken Sie die Anzahl der Versuche, so dass, wenn Sie nicht ein Bild platzieren können mit sagen 1000 versucht, Sie mit dem ersten Bild beginnen.

Answer 3

Es tut uns gräbt einen alten Post, aber ich habe kürzlich ein ähnliches Problem und es dauerte einige Zeit, um die perfekte Lösung zu finden -, dass ich jetzt teilen wollte. Es gibt drei Möglichkeiten, dies zu erreichen.

---

1) Die harte Art und Weise

Wenn Sie es auf eigene Faust implementieren möchten, werden Sie wahrscheinlich das Ergebnis erzielen Ihren Anforderungen am besten passt. Es dauert einige Zeit und viele Tests erfordern, aber es ist eigentlich gar nicht so schwierig, ein solches Merkmal auf eigene Faust zu implementieren. Sie können die Zufallsfunktionen Math.floor(Math.random() * Max) + Min verwenden, um eine zufällige Position in dem übergeordneten Elemente zu berechnen. Nachdem das erste Element zu positionieren, müssen Sie die Koordinaten des Elements speichern, die in einem Array zum Beispiel. Nun, bevor Sie das nächste Element zeigen, können Sie das Array um zu prüfen, ob es Überschneidungen gibt - wenn ja, können Sie einfach eine neue Position berechnen. Ist das nicht der effizienteste Weg, dies wahrscheinlich zu tun, aber es wird für nicht so große Mengen von Elementen ganz gut funktionieren. Aber ich bin mir ziemlich sicher, dass, wenn Sie dies umgesetzt, es ist auch nicht allzu schwierig, Ihren Algorithmus zu optimieren, um diesen effizienter zu machen.

2) Die Abhilfe Art und Weise

Der zweite Weg, dies zu erreichen ist es, Wege einfacher als der erste Weg, aber auch nicht so flexibel. Daher müssten Sie einige vordefinierte Layout verwenden - eine Art eines Gitters. So kann davon ausgehen, dass Sie einen Behälter mit 100 Gitterblöcken, also 100 Elementen in Ihren Elemente zu setzen. Sie können jetzt nur noch eine Zufallszahl zwischen 1 und 100 berechnen und Ihrem Elemente an den Gitter-Container anhänge. Es ist ganz einfach überlappend zu verhindern, aber diese Art und Weise zu tun, es ist nicht immer Ihre Bedürfnisse passen könnte.

3) Der einfachste Weg, Wenn suchten eine ganze Weile, aber es gab kein einziges Plugin, das meinen Bedürfnissen passen. Also habe ich auf meiner eigenen, die ich veröffentlicht und dem kostenlos genutzt werden. Sie können es finden unter manuelmaurer.at/randposplugin.php . Es ist ziemlich flexibel, so dass ich dies denke, der einfachste Weg für Sie, Ihre Ziele zu erreichen wäre.