Javascript: предотвращение наложения изображений случайным образом - PullRequest
Новая
       7

Javascript: предотвращение наложения изображений случайным образом

2 голосов
/ 22 августа 2011

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

Хорошо, вот (симпатичный) пример того, что я имею в виду: http://dl.dropbox.com/u/5550635/Test%20rounded%20gallery/example2.htm

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

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

CSS довольно прост: 

.project { //class given to the div containing the images
border-radius: 100px;
width: 200px;
height: 200px;
overflow: hidden;
}

#space { //container
width: 550px;
height: 700px;
background: #ccc;
border: 2px solid blue;
}

.parent_project { //parent of the .project div, position absolutely (to fix a problem between position and border-radius)
position: absolute;
}

Я искал в Интернете решение Javascript для предотвращения наложения изображений, но не смог найти такое, которое соответствует моим особенностям.Если вы просто посмотрите на мою проблему и поделитесь своими знаниями, я был бы очень благодарен.Спасибо!

1 Ответ

1 голос
/ 22 августа 2011

Вы должны отслеживать средние точки и радиусы окружностей.http://jsfiddle.net/pimvdb/5L9FN/

    var randomdiameter = 100*Math.random()+100; //random diameter
    var randomTop = 400*Math.random(); //random top position
    var randomLeft = 350*Math.random(); //random left position

    while(overlapping(randomTop + randomdiameter / 2,  // x midpoint
                      randomLeft + randomdiameter / 2, // y midpoint
                      randomdiameter / 2)) { // radius
        // generate again if overlapping any other image
        randomTop = 400*Math.random(); //random top position
        randomLeft = 350*Math.random(); //random left position
    }

    images.push([randomTop + randomdiameter / 2, 
                 randomLeft + randomdiameter / 2, 
                 randomdiameter / 2]); // push this image in the array

Затем, чтобы проверить наложение, вы можете рассчитать расстояние между каждыми двумя средними точками и проверить, меньше ли оно двух радиусов:

...