css瀑布流

发布: 2021-01-07 10:27:16 标签: css

css瀑布流

01<!DOCTYPE html>
02<html lang="en">
03 <head>
04 <meta charset="UTF-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
06 <title>css瀑布流</title>
07 <style>
08 * {
09 margin: 0;
10 padding: 0;
11 }
12 .box {
13 width: 80%;
14 margin: 0 auto;
15 column-count: 8;
16 -webkit-column-gap: 1em;
17 column-gap: 1em;
18 }
19 .item {
20 background-color: #eee;
21 break-inside: avoid;
22 -webkit-column-break-inside: avoid;
23 margin-bottom: 1em;
24 }
25 </style>
26 </head>
27 <body>
28 <div class="box">
29 <div class="item"></div>
30 </div>
31 <script>
32 const randomHeight = () => `${(Math.random() * 2 + 0.5) * 100}%`
33 const html = [...Array(100).keys()]
34 .map((i) => `<div class="item" style="padding-bottom: ${randomHeight()}">${i}</div>`)
35 .join('')
36 document.querySelector('.box').innerHTML = html
37 </script>
38 </body>
39</html>
40
复制代码