搜索到
1
篇与
Grid
的结果
-
JavaScript 生成瀑布流布局 JavaScript 生成瀑布流布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript实现瀑布流布局</title> <style> .box { display: grid; width: 100%; position: relative; grid-gap: 20px; align-items: start; } </style> </head> <body> <input type="text" placeholder="输入高" id="text" /> <input type="button" value="点我添加新元素" id="button" /> <div class="box" id="box"></div> <script> const color0x = () => { return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor( Math.random() * 256 ).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}`; }; const ids = [] const column = 2 const box = document.getElementById("box") const button = document.getElementById("button") const text = document.getElementById("text") window.onload = () => { box.style.gridTemplateColumns = `repeat(${column}, 1fr)` for (const item of Array.from(new Array(column).keys())) { let div = document.createElement("div") div.style.width = "100%" div.id = "div" + item box.append(div) ids.push(div) } button.onclick = () => { let min = ids[0].offsetHeight let id = 0; for (let i = 1; i < ids.length; i++) { if (ids[i].offsetHeight < min) { min = ids[i].offsetHeight id = i } } let div = document.createElement("div") div.style.width = "100%" div.style.height = text.value + "px" div.style.margin = "5px" div.style.backgroundColor = color0x() ids[id].appendChild(div) } } </script> </body> </html> .box { display: grid; width: 100%; position: relative; grid-gap: 20px; align-items: start; } const color0x = () => { return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor( Math.random() * 256 ).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}`; }; const ids = [] const column = 2 const box = document.getElementById("box") const button = document.getElementById("button") const text = document.getElementById("text") window.onload = () => { box.style.gridTemplateColumns = `repeat(${column}, 1fr)` for (const item of Array.from(new Array(column).keys())) { let div = document.createElement("div") div.style.width = "100%" div.id = "div" + item box.append(div) ids.push(div) } button.onclick = () => { let min = ids[0].offsetHeight let id = 0; for (let i = 1; i < ids.length; i++) { if (ids[i].offsetHeight < min) { min = ids[i].offsetHeight id = i } } let div = document.createElement("div") div.style.width = "100%" div.style.height = text.value + "px" div.style.margin = "5px" div.style.backgroundColor = color0x() ids[id].appendChild(div) console.log(div.style.backgroundColor); } }
