title
A prototype
*{box-sizing: border-box;} body{ margin:0; display:flex; flex-wrap:wrap; overflow:hidden; } .box{ width:50vw; height:50vh; background:purple; border:1px solid red; display:flex; } .box.vertical{ flex-direction:column; } .box img{ object-fit:cover; width:100%; height:100%; }
d = document b = d.body let boxes = d.querySelectorAll(".box.clickable") boxes.forEach(box => { box.onclick = function(e){ let el = this let randSplit = Math.round(Math.random()) if ( !el.getAttribute('data-hassplet') && randSplit) { // if split let randomAxis = Math.round(Math.random()) if (this.querySelector('img')) { this.querySelector('img').remove() } let exBoxes = this.querySelectorAll('.box') exBoxes.forEach(exBox => { exBox.classList.remove('clickable') }) let newParent = d.createElement('div') let newBox1 = d.createElement('div') let newBox2 = d.createElement('div') let newImg1 = d.createElement('img') let newImg2 = d.createElement('img') newParent.classList.add('box') newParent.classList.add('parent') newBox1.classList.add('box') newBox2.classList.add('box') newBox1.classList.add('clickable') newBox2.classList.add('clickable') newBox1.appendChild(newImg1) newBox2.appendChild(newImg2) newParent.appendChild(newBox1) newParent.appendChild(newBox2) el.appendChild(newParent) el.setAttribute('data-hassplet', 1) if (randomAxis) { // if true, vertical newParent.classList.add('vertical') } }else{ let randUnSplit = Math.round(Math.random()) // merge if (this.querySelector('.box') && randUnSplit) { this.querySelector('.box').remove() let newImg = d.createElement('img') this.appendChild(newImg) let rand = Math.round(Math.random() * 38) + 1 newImg.setAttribute('src',"folder/"+rand+".jpg") el.removeAttribute('data-hassplet') } } changeImg(el) } }); function changeImg(el){ let images = el.querySelectorAll('img') images.forEach(image =>{ let rand = Math.round(Math.random() * 38) + 1 image.setAttribute('src',"folder/"+rand+".jpg") }) }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code