Показать сообщение отдельно
  #9 (permalink)  
Старый 02.05.2020, 14:01
Интересующийся
Отправить личное сообщение для Perepelenok Посмотреть профиль Найти все сообщения от Perepelenok
 
Регистрация: 16.07.2016
Сообщений: 26

Спасибо огромное тебе! Очень выручил, вопрос по 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})
})
 });
Ответить с цитированием