Спасибо огромное тебе! Очень выручил, вопрос по 1 коду еще - иногда
елементы налазяют друг на друга, чаще всего те у которых высота больше ширины, как можно исправить? Сейчас код такой, я поигрался со значениями, чтобы больший промежуток был между элементами...И по 2му - как сделать, чтобы елементы появлялись в нограниченом количестве и пространстве?Сенк ю еще раз)
window.addEventListener( "load" , function() {
var parent = document.querySelector(".dragscroll");
var imgs = parent.querySelectorAll("div.item");
var arrayOfSectors = [],
column = parent.scrollWidth / 2000| 15,
length = imgs.length,
row = length / column | 0,
sectorWidth = Math.max(parent.scrollWidth / column , 1000),
sectorHeight = Math.max(parent.scrollHeight / row , 800) ;
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 + 200,
top = sectorHeight * h;
return {left, top}
}
imgs.forEach(img => {
var {style} = img;
var {left, top} = getPos();
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})
})
});