Позиционирование нескольких абсолютно произвольно расположенных элементов, чтобы они не перекрывались

Question

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

Конечная цельдолжно иметь изменяющееся облако слов, которое реагирует на взаимодействие с пользователем (помните Google Balls Doodle ?).Я действительно хотел бы построить это с нуля, чтобы развить мое понимание этого типа развития.Любая помощь в этом отделе также будет оценена:)

Answer 1

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

см. http://jsfiddle.net/fZtdt/13/

РЕДАКТИРОВАТЬ: Помните, что это очень простой и неоптимизированный код. Если, например, вы добавите много слов, скорее всего, сценарий не сможет уместить все слова внутри контейнера и войти в бесконечный цикл.

Answer 2

Я добавил скрипт Жюля, чтобы добавить это улучшение: поиск неперекрывающейся области ограничен (в противном случае, я считаю, что оригинальный скрипт будет зацикливаться), и выбран лучший регион (тот, который имеет наименьшее перекрытие).

см. http://jsfiddle.net/Vnyvc/21/

Воспроизведение с переменной maxSearchIterations и / или размером всего региона, это действительно имеет значение.