Как сохранить случайное расположение от массива в пределах высоты и ширины браузера? - PullRequest
0 голосов
/ 10 января 2019

Я работаю над сайтом, где у меня есть массив изображений, которые появляются случайным образом один за другим при щелчках пользователя или нажатии клавиш. Я реализовал функцию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...