Возможно, я что-то не так понимаю, но некоторые из приведенных примеров кажутся либо неправильными, либо недостаточно информативными. При проверке на столкновение нельзя просто проверить одну сторону, потому что вы вырезаете всю плоскость. Вы также не можете просто проверить один div, потому что тот, который вы пытаетесь разместить, может поглотить помещенный div, и вам может понадобиться проверить и это столкновение.
Я пытался обнаружить столкновения на изображениях, но его можно легко преобразовать в div. Я включил все функции, которые относятся к этому. Моя цель состояла в том, чтобы иметь возможность размещать div в любом месте на странице и рандомизировать изображения, а также их размещение, не затрагивая что-либо еще на странице. Очевидно, что если вы хотите использовать это, вам нужно изменить имена изображений на свои на изображениях, используя собственные пути.
Кроме того, если вы используете это с большим количеством изображений, или в ограниченном пространстве, или просто хотите обеспечить отказоустойчивость, в цикл while можно добавить счетчик, который будет использоваться для прерывания цикла, если определенное число было когда-либо достигнуто. Это предотвратит блокировку страницы, если возникли проблемы с поиском места для всего.
Надеюсь, кто-то, кто окажется здесь, как я, может его использовать.
CSS
#imageHolder {
z-index: -1;
background-color:red;
height: 700px;
width: 200px;
position: absolute;
top: 3px;
}
.preloadedImage {
display: none;
}
.loadedImage {
display: normal;
position: absolute;
z-index: -1; /* Can be removed. Places the Images underneath everything on the page.
}
Функция возвращает случайное число
function Random_Number(maxNumber) {
rndNumber = Math.floor(Math.random() * maxNumber);
return rndNumber;
}
Функция возвращает случайную позицию
//Params provide size of the image and which element to use for measurements.
//Don't want a left position to be against the edge, otherwise it will
//flow passed the div. However, if you want to achieve this look, just pass in 0,0 or remove them.
function Random_Position(elem, imgHeight, imgWidth) {
var top = Math.floor(Math.random() * ($(elem).height() - imgHeight));
var left = Math.floor(Math.random() * ($(elem).width() - imgWidth));
var pos = [top, left];
return pos;
}
Основная функция
function Randomize_Images(elem, numOfImgs, imgNameArr) {
var imgIDs = [];
var collision;
var rndImgPos; //needs to be declared outside of loops so it can access outside of loops.
for (var z = 0; z < numOfImgs; z++) {
imgIDs.push("rndImg" + $(elem).attr("id") + z);
}
//Main loop - each iterations places a random image inside the div free of collision
for (var i = 0; i < numOfImgs; i++) {
//Create the image and hide it until its position has been set.
$(elem).append($("<img />", {
src: "libs/images/random_images/" + imgNameArr[Random_Number(imgNameArr.length)] + ".png",
id: imgIDs[i],
class: "preloadedImage"
}));
collision = true;
//Collision loop. Will not exit unless its forced, or finds a free a spot.
while (collision) {
//the image that will be added.
var curImg = $("#" + imgIDs[i]);
rndImgPos = Random_Position(elem, curImg.height(), curImg.width());
var imgTop = rndImgPos[0];
var imgBot = rndImgPos[0] + curImg.height();
var imgLeft = rndImgPos[1];
var imgRight = rndImgPos[1] + curImg.width();
//no reason to check for collision with the first image.
if (i >= 1) {
//Image loop. Will loop through all images previously placed, and check for collision.
for (var x = 0; x < i; x++) {
var setImg = $("#" + imgIDs[x]);
var setImgPos = setImg.position();
var setTop = setImgPos.top;
var setBot = setImgPos.top + setImg.height();
var setLeft = setImgPos.left;
var setRight = setImgPos.left + setImg.width();
if (((imgLeft < setLeft && imgRight > setLeft) || (imgLeft < setRight && imgRight > setRight)) && ((imgTop < setTop && imgBot > setTop) || (imgTop < setBot && imgBot > setBot))) {
collision = true;
break;
}
else if (((setLeft < imgLeft && setRight > imgLeft) || (setLeft < imgRight && setRight > imgRight)) && ((setTop < imgTop && setBot > imgTop) || (setTop < imgBot && setBot > imgBot))) {
collision = true;
break;
}
else {
collision = false;
}
}
}
else {
collision = false;
}
}
//Set the coordinates for the new image, and assign it's permanent class.
var curImg = $("#" + imgIDs[i]);
$(curImg).css("top", rndImgPos[0]);
$(curImg).css("left", rndImgPos[1]);
curImg.removeClass("preloadedImage");
curImg.addClass("loadedImage");
}
}
Пример для вызова
//I am calling the function here after window load, with an additional 2 second pause because I have a Datatable loading, and it adds to the height of the page. For this particular call, I want the div to be the length of the entire page. You don't need anything but the function call otherwise.
$(window).on("load", function(){
setTimeout(function(){
var imgNames = ["bullethole1", "bullethole2", "bullethole3", "bullethole4", "bullethole5", "bullethole6"];
$("#imageHolder").height($(document).height());
Randomize_Images($("#imageHolder"), 20, imgNames);
},2000);
});