Случайное положение дочерних елементов
Всем привет! Есть скрипт, дающий возможность зажиманием мышки передвигаться( скролить блок), и рандомно распологая дочерние елементы (img) в этом блоке. Картинок будет много. Как расположить дочерние елементы рандомно, но с растоянием между ними? Проблема на картинках :
Так на данный момент как добиться этого? Вот разметка: <style> .dragscroll{ position:relative; overflow: hidden; width: 100%; height: 100vh; padding: 20px; cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: grab; color: #fff; } </style> <div class="dragscroll"> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> <img src="image.jpg width="200px" height="auto" style="position:absolute;"></img> </div> И вот сам скрипт (function (root, factory) { if (typeof define === 'function' && define.amd) { define(['exports'], factory); } else if (typeof exports !== 'undefined') { factory(exports); } else { factory((root.dragscroll = {})); } }(this, function (exports) { var _window = window; var _document = document; var mousemove = 'mousemove'; var mouseup = 'mouseup'; var mousedown = 'mousedown'; var EventListener = 'EventListener'; var addEventListener = 'add'+EventListener; var removeEventListener = 'remove'+EventListener; var newScrollX, newScrollY; var dragged = []; var reset = function(i, el) { for (i = 0; i < dragged.length;) { el = dragged[i++]; el = el.container || el; el[removeEventListener](mousedown, el.md, 0); _window[removeEventListener](mouseup, el.mu, 0); _window[removeEventListener](mousemove, el.mm, 0); } // cloning into array since HTMLCollection is updated dynamically dragged = [].slice.call(_document.getElementsByClassName('dragscroll')); for (i = 0; i < dragged.length;) { (function(el, lastClientX, lastClientY, pushed, scroller, cont){ (cont = el.container || el)[addEventListener]( mousedown, cont.md = function(e) { if (!el.hasAttribute('nochilddrag') || _document.elementFromPoint( e.pageX, e.pageY ) == cont ) { pushed = 1; lastClientX = e.clientX; lastClientY = e.clientY; e.preventDefault(); } }, 0 ); _window[addEventListener]( mouseup, cont.mu = function() {pushed = 0;}, 0 ); _window[addEventListener]( mousemove, cont.mm = function(e) { if (pushed) { (scroller = el.scroller||el).scrollLeft -= newScrollX = (- lastClientX + (lastClientX=e.clientX)); scroller.scrollTop -= newScrollY = (- lastClientY + (lastClientY=e.clientY)); if (el == _document.body) { (scroller = _document.documentElement).scrollLeft -= newScrollX; scroller.scrollTop -= newScrollY; } } }, 0 ); })(dragged[i++]); } } if (_document.readyState == 'complete') { reset(); } else { _window[addEventListener]('load', reset, 0); } exports.reset = reset; })); $( document ).ready(function() { $( '.dragscroll img' ).each(function() { $holder = $(this).parent(); $divWidth = $holder.width(); $divHeight = $holder.height(); $(this).css({ 'left': Math.floor( Math.random() * Number( $divWidth ) ), 'top' : Math.floor( Math.random() * Number( $divHeight ) ) }); }) }); |
|
Цитата:
|
Perepelenok,
1. проверять координаты на пересечение и генерировать новые, если условие не подходит. или 2.делать сетку (таблицу) и вставлять в ячейки со сдвигом. других вариантов не знаю. https://javascript.ru/forum/dom-wind...tml#post523032 |
Цитата:
|
Цитата:
Можешь, если свободное время есть, написать код? А то я совсем никак разобраться не могу( |
рандомный вывод блоков без наложения по сетке
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> |
вывод картинок без наложения
Perepelenok,
показ всех картинок не гарантирован, можно задать время поиска свободных мест(строка 119), изменение фона это конец "поиска", можно таскать за чёрный фон. <!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .dragscroll{ overflow: hidden; position:relative; width: 100vw; height: 100vh; cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: grab; color: #fff; } .dragscroll img{ position:absolute; width: 200px; opacity: 0; left: 50%; top: 50%; box-sizing: border-box; display: block; } .dragscroll img.add{ transition: 1s; opacity: 1; } .dragscroll.add{ background-color: #000000; } .dragscroll.add img.add{ border: 2px solid #FFFFFF; border-radius: 4px; } #app{ max-width: 600px; height: 400px; box-shadow: 0 0 1em black; overflow: hidden; border-radius: 4px; margin: 20px auto; } </style> <script> window.addEventListener("load", function() { function random(length) { return Math.trunc(Math.random() * length) } function dataAcquisition(parent, elem) { var width = elem.offsetWidth + 6; var height = elem.offsetHeight + 6; var left = random(parent.clientWidth - width); var top = random(parent.clientHeight - height); return [left, top, width, height] } function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) { return x1 < x2 + w2 && y1 < y2 + h2 && x1 + w1 > x2 && y1 + h1 > y2 } function reshuffle(parent, duration) { cancelAnimationFrame(timer); parent.classList.remove("add"); var imgs = [...parent.querySelectorAll("img")]; imgs.forEach(elem => elem.classList.remove("add")); var beginTime = performance.now(); var arrayAdd = []; function addPos(currentTime) { var i = random(imgs.length); var elem = imgs[i]; var {style} = elem; var a = dataAcquisition(parent, elem); var add = arrayAdd.every(b => !collisionDetection(...a, ...b)) if (add) { var w = (parent.clientWidth - a[0])/2, h = (parent.clientHeight - a[1])/2, temp = a.slice(0); for (var k = 0; k < 1; k+= .05) { var c = a.slice(0); c[1] += (h - c[1]) * k; add = arrayAdd.every(b => !collisionDetection(...c, ...b)); if(add) temp = c.slice(0); else break; }; a = temp.slice(0); for (var k = 0; k < 1; k+= .05) { var c = a.slice(0); c[0] += (w - c[0]) * k; add = arrayAdd.every(b => !collisionDetection(...c, ...b)); if(add) temp = c.slice(0); else break; }; arrayAdd.push(temp); imgs.splice(i, 1); var [left, top] = temp; left += "px"; top += "px"; Object.assign(style, {left, top}); elem.classList.add("add") }; if (imgs.length && currentTime - beginTime < duration) timer = requestAnimationFrame(addPos); else parent.classList.add("add"); } timer = requestAnimationFrame(addPos) } var parent = document.querySelector(".dragscroll"); var duration = 10 * 1000; reshuffle(parent, duration); var timer; window.addEventListener("resize", function() { cancelAnimationFrame(timer); clearTimeout(timer); timer = window.setTimeout(() => reshuffle(parent, duration), 100) }); var _startX, _startY, _scrollLeft, _scrollTop; function pointerHandler(event) { const { screenX, screenY } = event; if(event.type === "pointerdown") { document.addEventListener("pointermove", pointerHandler); document.addEventListener("pointerup", pointerHandler); _startX = screenX; _startY = screenY; _scrollLeft = app.scrollLeft; _scrollTop = app.scrollTop; } if(event.type === "pointerup") { document.removeEventListener("pointermove", pointerHandler); document.removeEventListener("pointerup", pointerHandler); } if(event.type === "pointermove") { const dx = (screenX - _startX) ; const dy = (screenY - _startY) ; app.scrollLeft = _scrollLeft - dx; app.scrollTop = _scrollTop - dy; } event.preventDefault(); } var app = document.querySelector("#app"); app.addEventListener("pointerdown", pointerHandler); }); </script> </head> <body> <div id="app"> <div class="dragscroll"> <img src="https://loremflickr.com/320/200/kitty,kitten?random=1" alt=""> <img src="https://loremflickr.com/320/400/kitty,kitten?random=2" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=3" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=4" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=5" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=6" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=7" alt=""> <img src="https://loremflickr.com/320/400/kitty,kitten?random=8" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=9" alt=""> <img src="https://loremflickr.com/320/500/kitty,kitten?random=10" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=11" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=12" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=13" alt=""> <img src="https://loremflickr.com/320/400/kitty,kitten?random=14" alt=""> <img src="https://loremflickr.com/320/100/kitty,kitten?random=15" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=16" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=17" alt=""> <img src="https://loremflickr.com/320/400/kitty,kitten?random=18" alt=""> <img src="https://loremflickr.com/320/200/kitty,kitten?random=19" alt=""> <img src="https://loremflickr.com/320/100/kitty,kitten?random=20" alt=""> </div> </div> </body> </html> |
Спасибо огромное тебе! Очень выручил, вопрос по 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}) }) }); |
Цитата:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"> <style> html, body { margin: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .dragscroll { position: relative; width: 80%; height: 80%; border-radius: 0.5em; cursor: move; color: #fff; background: black; overflow: auto; padding: 0.5em; box-sizing: border-box; } .dragscroll.loading { overflow: hidden; } .dragscroll::-webkit-scrollbar { width: 15px; height: 15px; background: black; } .dragscroll::-webkit-scrollbar-corner { background: black; } .dragscroll::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.5); border-radius: 15px; border: 2px solid transparent; background-clip: content-box; } .dragscroll img { border: 2px solid #fff; border-radius: 4px; transition: 1s; margin: 0.1em; object-fit: cover; box-sizing: border-box; position: absolute; } .dragscroll>splash-screen { position: absolute; background: black; z-index: 2000; top: 0; bottom: 0; left: 0; right: 0; height: 100%; display: flex; justify-content: center; align-items: center; cursor: default; } .dragscroll progress { -webkit-appearance: none; appearance: none; border: none; width: 50%; height: 20px; background-color: #222; border-radius: 10px; color: #222; position: relative; margin: 0 0 1.5em; } .dragscroll progress::-webkit-progress-bar { background: #222; border-radius: 10px; } .dragscroll progress::-webkit-progress-value { position: relative; background: #666; border-radius: 10px; } .dragscroll progress::-moz-progress-bar { background: #666; border-radius: 10px; } </style> <script> const SELECTOR = ".dragscroll"; const GAP = 5; const MAX_WIDTH = 320; const INNER_SCALE_Y = 2.5; document.addEventListener("DOMContentLoaded", event => { for (const root of document.querySelectorAll(SELECTOR)) { let processed = 0; root.classList.add("loading"); const rects = Array.from(root.querySelectorAll("img"), image => { return { width: image.naturalWidth || 1, height: image.naturalHeight || 1, element: image }; }); for (const rect of rects) { rect.element.addEventListener("load", event => { rect.element.style.transform = `scale(${0.7 + 0.3 * Math.random()})`; rect.width = rect.element.naturalWidth; rect.height = rect.element.naturalHeight; updateProcessed(); }); rect.element.addEventListener("error", updateProcessed); } data.push([root, rects]); function updateProcessed() { processed++; progressBar.value = processed / rects.length; if (processed == rects.length) { renderAllRects(); root.classList.remove("loading"); splashScreen.remove(); } } const splashScreen = document.createElement("splash-screen"); root.append(splashScreen); const progressBar = document.createElement("progress"); splashScreen.append(progressBar); } }); addEventListener("resize", renderAllRects); const data = []; function renderAllRects() { for (const datum of data) renderRects(...datum); } function renderRow({ x, y, row, GAP, root }) { const rowHeight = y; const ratio = Math.min((INNER_SCALE_Y * root.clientHeight - (row.length + 1) * GAP) / rowHeight, 1); let rowY = GAP; row.forEach(({ width, height, element }) => { element.style.cssText += ` position: absolute; top: ${rowY}px; left: ${x}px; width: ${ratio * width}px; height: ${ratio * height}px; `; rowY += ratio * height + GAP; }); return ratio; } function renderRects(root, rects) { let x = GAP, y = 0, row = []; rects.forEach(({ width, height, element }) => { const scaledHeight = (MAX_WIDTH / width) * height; y += scaledHeight; row.push({ height: scaledHeight, width: MAX_WIDTH, element }); if (y >= INNER_SCALE_Y * root.clientHeight) { const ratio = renderRow({ x, y, row, GAP, root }); row = []; y = 0; x += ratio * MAX_WIDTH + GAP; } }); renderRow({ x, y, row, GAP, root }); } document.addEventListener("DOMContentLoaded", event => { let node, isActive = false, x, y; function mousedown(event) { event.preventDefault(); node = this; isActive = true; x = event.screenX; y = event.screenY; addEventListener("mousemove", mousemove); addEventListener("mouseup", mouseup); } function mousemove(event) { event.preventDefault(); node.scrollBy((x - (x = event.screenX)) / devicePixelRatio, (y - (y = event.screenY)) / devicePixelRatio); } function mouseup(event) { isActive = false; removeEventListener("mousemove", mousemove); removeEventListener("mouseup", mouseup); } for (const node of document.querySelectorAll(SELECTOR)) { node.addEventListener("mousedown", mousedown); } }); </script> </head> <body> <div class="dragscroll"> <script> for (var i = 0, w, h; i < 50; i++) { w = Math.round(320 + 160 * Math.random()); h = Math.round(100 + 400 * Math.random()); document.write(`<img src="https://loremflickr.com/${w}/${h}/kitty,kitten?random=${i}">`); } </script> </div> </body> </html> |
Часовой пояс GMT +3, время: 01:33. |