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

#javascript #random

#javascript #Случайный

Вопрос:

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

Ответ №1:

Вы могли бы разместить их равномерно, а затем случайным образом переместить их немного … что-то вроде этого:

 var w = 200, h = 150, leftOffset = 60, topOffset = 30, leftDeviation = 90, topDeviation = 60
for(i=0;i<5;i  )
    $('<div />').css({
        left:(i*w leftOffset Math.round(Math.random()*leftDeviation)),
        top:(topOffset Math.round(Math.random()*topDeviation)),
        opacity:.6,width:w,height:h,backgroundColor:'red',position: 'absolute'}).appendTo('body')

Демонстрация здесь: http://jsfiddle.net/y2hdE /

Это включает в себя макет сетки: http://jsfiddle.net/y2hdE/1 /

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

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

Ответ №2:

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

Ответ №3:

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