Генерируйте случайную позицию элемента и предотвращайте перекрытие в JavaScript

Question

У меня есть 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>

Answer 1

Я думаю плагина нет.Я реализую это, как предложил Сандер, создав предопределенную сетку div и просто загрузив в эти div случайные изображения.Это проще и быстрее, чем вычисление размеров/положения изображения, и выполняет практически ту же работу.Не случайно, но визуально выглядит хорошо :)

Answer 2

Сохраните выбранные координаты в массиве, чтобы можно было сравнивать координаты каждого нового изображения, которое вы размещаете, с предыдущим.

Если выбранные вами координаты перекрывают предыдущее изображение, выберите новые координаты.Ограничьте количество попыток, чтобы, если вы не можете разместить изображение, скажем, с 1000 попытками, вы начинали заново с первого изображения.

Answer 3

Извините, что откопал старое сообщение, но недавно я столкнулся с аналогичной проблемой, и мне потребовалось некоторое время, чтобы найти идеальное решение, которым я теперь хотел поделиться.Есть три способа добиться этого.

---

1) Трудный путь

Если вы захотите реализовать его самостоятельно, вы, вероятно, добьетесь результата, который лучше всего соответствует вашим потребностям.Это требует некоторого времени и большого количества тестов, но на самом деле реализовать такую ​​функцию самостоятельно не так уж и сложно.Вы можете использовать случайные функции Math.floor(Math.random() * Max) + Min для вычисления случайной позиции в родительском элементе.После позиционирования первого элемента вам необходимо сохранить координаты элемента, например, в массиве.Теперь, прежде чем показывать следующий элемент, вы можете использовать массив, чтобы проверить, есть ли перекрытия. Если да, вы можете просто вычислить новую позицию.Вероятно, это не самый эффективный способ сделать это, но он будет работать вполне хорошо для не такого большого количества элементов.Но я почти уверен, что если вы реализовали это, вам также не составит труда оптимизировать ваш алгоритм, чтобы сделать его более эффективным.

2) Обходной путь

Второй способ добиться этого намного проще первого, но и не такой гибкий.Поэтому вам нужно будет использовать какой-то предопределенный макет — что-то вроде сетки.Итак, давайте предположим, что у вас есть контейнер со 100 блоками сетки, то есть 100 элементами для размещения ваших элементов.Теперь вы можете просто вычислить случайное число от 1 до 100 и добавить свой элемент в контейнер сетки.Предотвратить перекрытие довольно легко, но такой способ не всегда может соответствовать вашим потребностям.

3) Самый простой способЕсли долго искал, но не нашел ни одного плагина, подходящего под мои нужды.Поэтому я создал свой собственный, который опубликовал и которым можно пользоваться бесплатно.Вы можете найти его под manuelmaurer.at/randposplugin.php.Он довольно гибкий, поэтому я думаю, что это будет самый простой способ достичь ваших целей.