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
复制代码