Я работаю над сайтом, где у меня есть массив изображений, которые появляются случайным образом один за другим при щелчках пользователя или нажатии клавиш. Я реализовал функцию jQuery, чтобы они могли произвольно располагаться на странице при загрузке каждого из них. Я собираюсь получить тот же эффект, что и на этом сайте . Единственная проблема, с которой я сталкиваюсь сейчас, заключается в том, что иногда, когда появляются изображения, в зависимости от положения, которое они увеличивают, высоты браузера, ширины или того и другого. Я хотел бы сохранить случайно расположенные изображения в пределах высоты и ширины браузера. Вот мой код ниже, любая помощь очень ценится!
var pictures = new Array();
var count = 0;
pictures[0]="1.jpg"
pictures[1]="2.png"
pictures[2]="3.jpg"
pictures[3]="4.jpg"
pictures[4]="5.png"
pictures[5]="a.jpg"
pictures[6]="b.jpg"
pictures[7]="c.jpg"
pictures[8]="e.jpg"
pictures[9]="f.jpg"
$(document).click(function(e){
// Show an image
var x = document.querySelector(".container");
var bodyWidth = x.clientWidth;
var bodyHeight = x.clientHeight;
var new_img = pictures[Math.floor(Math.random() * pictures.length)];
var imgtag = $('<img id="randomImg">');
imgtag.attr('src',new_img);
$(imgtag).addClass("imgs");
$(imgtag).appendTo('#imgArray');
count++;
console.log(count);
if(count == 10) {
$('img:first-child', this).remove();
count--;
}
$('.imgs').each(function(idx, img) {
var randPosX = Math.floor((Math.random() * bodyWidth));
var randPosY = Math.floor((Math.random() * bodyHeight));
$(imgtag).css('left', randPosX);
$(imgtag).css('top', randPosY);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>