Исправьте мой скрипт случайного позиционирования изображения, чтобы изображения не перекрывались

Я сделал скрипт (вот скрипт, основанный на моем JS) для случайного позиционирования <li> элементов.

Однако элементы накладываются друг на друга.

Как я могу изменить свой код, чтобы элементы больше не перекрывались?

Это сценарий:

var images = [];

function init() {
    $('.friend-selection li > div').each(function(){
        var id = this.id;
        var img = $('#img_' + id);
        var randomTop = 500*Math.random(); //random top position
        var randomLeft = 500*Math.random(); //random left position

        $("#parent_" + id).css({ //apply the position to parent divs
            top : randomTop,
            left : randomLeft
        });
    });
};

init();

У меня есть этот html. ul с элементами li:

<li id="parent_picture1">
    <div id="picture1">    
        <div class="glow"></div>
        <img src="static/img/voorbeeld/vrouw.jpg" width="111" height="166" id="img_picture1">
        <span class="name">Naam Achternaam</span>
    </div>      
</li>

javascript image random jquery overlap
person Mike Vierwind    schedule 18.10.2011    source источник
comment
Не добавляйте несколько вопросов для одной и той же проблемы. Почему бы не улучшить то, что вы уже спрашивали?   -  person Widor    schedule 18.10.2011
comment
Или как я могу сделать это с фиксированными позициями??? Нет, и это не проблема css. Сценарий устанавливает элементы li в разных позициях. Но div перекрываются. Как исправить этот скрипт. Что у меня нет перекрытия. Или как я могу исправить этот скрипт. С фиксированными позициями?   -  person Mike Vierwind    schedule 18.10.2011
comment
#parent_picture1 {position: relative;} #parent_picture1 div{ position: absolue;} я имел в виду что-то вроде этого... перекрытие - это проблема css, а не javascript, не имеет значения, где находится элемент в html, вы всегда можете изменить его положение и глубину с помощью css. используйте z-index, если вам нужно   -  person Val    schedule 18.10.2011
comment
Нет, это не решение. Посмотрите здесь: jsfiddle.net/5L9FN/2   -  person Mike Vierwind    schedule 18.10.2011

Ответы (2)


arrow_upward
1
arrow_downward

Мне нужно знать немного больше о проблеме, чтобы решить, как я это сделаю, но вот некоторые идеи, которые могут сработать.

Если все изображения имеют одинаковый размер, вы сможете что-то сделать с помощью модуля, например. randomTop = (500 * Math.random()) % picWidth.

Конечно, вам нужно будет отслеживать, какие слоты вы уже использовали, поэтому, если массив изображений будет плотным, я, вероятно, добавлю слоты в случайный массив и повторю его.

        var slots = [];

        for (var y = 0; y < 5; y++)
        {
            for (var x = 0; x < 5; x++)
            {
                slots.push([x, y]);
            }
        }

        slots.sort(function () { return (0.5 - Math.random()); });

        $('.friend-selection li > div').each(function() { ... }

(Обратите внимание, что случайный метод, который я использовал , не это здорово.)

Если изображения не фиксированного размера, все становится сложнее. Я бы начал с просмотра jQuery Masonry в поисках кода, идей или даже полного решения. .

person meloncholy    schedule 18.10.2011

arrow_upward
1
arrow_downward

Вам нужно сохранить координаты каждой случайной позиции в массиве.

Для каждого <li>:

  • Get a random coordinate pair random_coordinates.
    • Check random_coordinates against each pair in positions_array:
      • does random_coordinates[0] + the width of your <li> overlap the positions_array[i][0] + the width of your <li> range anywhere?
        • If yes, start over.
      • does random_coordinates[1] + the height of your <li> overlap the positions_array[i][1] + the height of your <li> range anywhere?
        • If yes, start over.
    • Если коллизий не обнаружено, нажмите пару random_coordinates на positions_array, примените css, перейдите к следующему пункту <li>.
person vzwick    schedule 18.10.2011
comment
@MikeVierwind SO - это не код для меня, это сайт. Мой пример уже довольно многословен и легко преобразуется в код. - person vzwick; 19.10.2011