css瀑布流 发表于 2021-01-07 | 更新于 2023-01-11 css瀑布流123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css瀑布流</title> <style> * { margin: 0; padding: 0; } .box { width: 80%; margin: 0 auto; column-count: 8; -webkit-column-gap: 1em; column-gap: 1em; } .item { background-color: #eee; break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 1em; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> <script> const randomHeight = () => `${(Math.random() * 2 + 0.5) * 100}%` const html = [...Array(100).keys()] .map((i) => `<div class="item" style="padding-bottom: ${randomHeight()}">${i}</div>`) .join('') document.querySelector('.box').innerHTML = html </script> </body></html>