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

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

0 голосов
/ 18 октября 2011

Я сделал скрипт (, вот скрипка, основанная на моем 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. Ул с элементами 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>

Ответы [ 2 ]

1 голос
/ 18 октября 2011

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

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

  • Получить случайную пару координат random_coordinates.
    • Проверка random_coordinates против каждой пары в positions_array:
      • перекрывает ли random_coordinates[0] + the width of your <li> диапазон positions_array[i][0] + the width of your <li> где-нибудь?
        • Если да, начните сначала.
      • перекрывает ли random_coordinates[1] + the height of your <li> диапазон positions_array[i][1] + the height of your <li> где-нибудь?
        • Если да, начните сначала.
    • Если столкновений не обнаружено, нажмите пару random_coordinates на positions_array, примените css, перейдите к следующему элементу <li>.
1 голос
/ 18 октября 2011

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

Если все изображения имеют одинаковый размер, вы должны быть в состоянии сделать что-то, используя модуль, например, 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 для кода, идей или даже полного решения.

...