Perepelenok,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body{
width: 100%;
height: 100vh;
}
.dragscroll{
position:relative;
width: 100%;
height: 100vh;
padding: 20px;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: grab;
color: #fff;
}
.dragscroll img{
position:absolute;
}
</style>
<script>
window.addEventListener( "load" , function() {
var parent = document.querySelector(".dragscroll");
var imgs = parent.querySelectorAll("img");
var arrayOfSectors = [],
column = parent.scrollWidth / 250 | 0,
length = imgs.length,
row = length / column | 0,
sectorWidth = Math.max(parent.scrollWidth / column , 200),
sectorHeight = Math.max(parent.scrollHeight / row , 180) ;
console.log(column, row, length)
function getPos() {
if (!arrayOfSectors.length) {
arrayOfSectors = Array.from({
length
}, (v, i) => i);
}
var i = arrayOfSectors.splice((Math.random() * arrayOfSectors.length | 0), 1)[0];
var h = i / column | 0;
var w = i % column;
var left = sectorWidth * w,
top = sectorHeight * h;
return {left, top}
}
imgs.forEach(img => {
var {style} = img;
var {left, top} = getPos(); console.log(left, top)
var {width, height} = img.getBoundingClientRect();
left += Math.floor((Math.random() * (sectorWidth - width)));
top += Math.floor((Math.random() * (sectorHeight - height)));
left += "px";
top += "px";
Object.assign(style, {left, top})
})
});
</script>
</head>
<body>
<div class="dragscroll">
<img src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/83D7/production/_111515733_gettyimages-1208779325.jpg" width="200px" height="auto">
<img src="https://sjferret.com/wp-content/uploads/Thinking-of-getting-a-cat.png" width="200px" height="auto">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" width="200px" height="auto">
<img src="https://www.interfax.ru/ftproot/textphotos/2019/05/17/700gc.jpg" width="200px" height="auto">
<img src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/83D7/production/_111515733_gettyimages-1208779325.jpg" width="200px" height="auto">
<img src="https://sjferret.com/wp-content/uploads/Thinking-of-getting-a-cat.png" width="200px" height="auto">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" width="200px" height="auto">
<img src="https://www.interfax.ru/ftproot/textphotos/2019/05/17/700gc.jpg" width="200px" height="auto">
<img src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/83D7/production/_111515733_gettyimages-1208779325.jpg" width="200px" height="auto">
<img src="https://sjferret.com/wp-content/uploads/Thinking-of-getting-a-cat.png" width="200px" height="auto">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" width="200px" height="auto">
<img src="https://www.interfax.ru/ftproot/textphotos/2019/05/17/700gc.jpg" width="200px" height="auto">
<img src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/83D7/production/_111515733_gettyimages-1208779325.jpg" width="200px" height="auto">
<img src="https://sjferret.com/wp-content/uploads/Thinking-of-getting-a-cat.png" width="200px" height="auto">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" width="200px" height="auto">
<img src="https://www.interfax.ru/ftproot/textphotos/2019/05/17/700gc.jpg" width="200px" height="auto">
<img src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/83D7/production/_111515733_gettyimages-1208779325.jpg" width="200px" height="auto">
<img src="https://sjferret.com/wp-content/uploads/Thinking-of-getting-a-cat.png" width="200px" height="auto">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" width="200px" height="auto">
<img src="https://www.interfax.ru/ftproot/textphotos/2019/05/17/700gc.jpg" width="200px" height="auto">
<img src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/83D7/production/_111515733_gettyimages-1208779325.jpg" width="200px" height="auto">
<img src="https://sjferret.com/wp-content/uploads/Thinking-of-getting-a-cat.png" width="200px" height="auto">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" width="200px" height="auto">
<img src="https://www.interfax.ru/ftproot/textphotos/2019/05/17/700gc.jpg" width="200px" height="auto">
</div>
</body>
</html>