瀑布流实现

瀑布流原理

  • 设置图片宽度一致
  • 根据浏览器宽度以及每列宽度计算处列表数
  • 当图片加载完成，所有的图片依此放置在高度最小的列数下面
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7
    <title>瀑布流</title>
8
    <style>
9
      .item {
10
        float: left;
11
        display: flex;
12
        justify-content: center;
13
        align-items: center;
14
        font-size: 30px;
15
        font-weight: 700;
16
        color: aliceblue;
17
        margin-right: 15px;
18
        margin-bottom: 15px;
19
        width: 200px;
20
        position: absolute;
21
      }
22
23
      img {
24
        width: 100%;
25
        height: 100%;
26
      }
27
    </style>
28
  </head>
29
  <body>
30
    <div id="list">
31
      <div class="item"><img src="./image/1.jpeg" alt="" /></div>
32
      <div class="item"><img src="./image/2.jpeg" alt="" /></div>
33
      <div class="item"><img src="./image/3.jpeg" alt="" /></div>
34
      <div class="item"><img src="./image/4.jpeg" alt="" /></div>
35
      <div class="item"><img src="./image/5.jpeg" alt="" /></div>
36
      <div class="item"><img src="./image/6.jpeg" alt="" /></div>
37
      <div class="item"><img src="./image/7.jpeg" alt="" /></div>
38
      <div class="item"><img src="./image/8.jpeg" alt="" /></div>
39
      <div class="item"><img src="./image/9.jpeg" alt="" /></div>
40
      <div class="item"><img src="./image/10.jpeg" alt="" /></div>
41
      <div class="item"><img src="./image/11.jpeg" alt="" /></div>
42
      <div class="item"><img src="./image/12.jpeg" alt="" /></div>
43
      <div class="item"><img src="./image/13.jpeg" alt="" /></div>
44
      <div class="item"><img src="./image/14.jpeg" alt="" /></div>
45
      <div class="item"><img src="./image/15.jpeg" alt="" /></div>
46
      <div class="item"><img src="./image/16.jpeg" alt="" /></div>
47
    </div>
48
  </body>
49
  <script>
50
    var list = document.getElementById("list");
51
    var items = document.getElementsByClassName("item");
52
    //定义间隙10像素
53
    var gap = 10;
54
    //进页面执行函数
55
    window.onload = function () {
56
      waterFall();
57
    };
58
59
    function waterFall() {
60
      //首先确定列数 = 页面的宽度 / 图片的宽度
61
      var pageWidth = getClient().width;
62
      var itemWidth = items[0].offsetWidth;
63
      var columns = parseInt(pageWidth / (itemWidth + gap));
64
      var arr = []; //定义一个数组，用来存储元素的高度
65
      for (var i = 0; i < items.length; i++) {
66
        if (i < columns) {
67
          //满足这个条件则说明在第一行
68
          items[i].style.top = 0;
69
          items[i].style.left = (itemWidth + gap) * i + "px";
70
          arr.push(items[i].offsetHeight);
71
        } else {
72
          //其他行，先找出最小高度列，和索引
73
          //假设最小高度是第一个元素
74
          var minHeight = arr[0];
75
          var index = 0;
76
          for (var j = 0; j < arr.length; j++) {
77
            //找出最小高度
78
            if (minHeight > arr[j]) {
79
              minHeight = arr[j];
80
              index = j;
81
            }
82
          }
83
          //设置下一行的第一个盒子的位置
84
          //top值就是最小列的高度+gap
85
          items[i].style.top = arr[index] + gap + "px";
86
          items[i].style.left = items[index].offsetLeft + "px";
87
88
          //修改最小列的高度
89
          //最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
90
          arr[index] = arr[index] + items[i].offsetHeight + gap;
91
        }
92
      }
93
    }
94
95
    //当页面尺寸发生变化时，触发函数，实现响应式
96
    window.onresize = function () {
97
      waterFall();
98
    };
99
100
    window.onscroll = function () {
101
      if (
102
        getClient().height + getScrollTop() >=
103
        items[items.length - 1].offsetTop
104
      ) {
105
        // 模拟加载请求数据
106
        var data = [
107
          "./image/1.jpeg",
108
          "./image/2.jpeg",
109
          "./image/3.jpeg",
110
          "./image/4.jpeg",
111
          "./image/5.jpeg",
112
          "./image/6.jpeg",
113
          "./image/7.jpeg",
114
          "./image/8.jpeg",
115
          "./image/9.jpeg",
116
          "./image/10.jpeg",
117
          "./image/11.jpeg",
118
          "./image/12.jpeg",
119
          "./image/13.jpeg",
120
          "./image/14.jpeg",
121
          "./image/15.jpeg",
122
          "./image/16.jpeg",
123
        ];
124
125
        for (let i = 0; i < data.length; i++) {
126
          var div = document.createElement("div");
127
          div.className = "item";
128
          div.innerHTML = `<img src="${data[i]}" alt="">`;
129
          list.appendChild(div);
130
        }
131
132
        waterFall();
133
      }
134
    };
135
136
    // clientWidth 处理兼容性
137
    function getClient() {
138
      return {
139
        width:
140
          window.innerWidth ||
141
          document.documentElement.clientWidth ||
142
          document.body.clientWidth,
143
        height:
144
          window.innerHeight ||
145
          document.documentElement.clientHeight ||
146
          document.body.clientHeight,
147
      };
148
    }
149
    // scrollTop兼容性处理
150
    function getScrollTop() {
151
      return window.pageYOffset || document.documentElement.scrollTop;
152
    }
153
154
    function rgb() {
155
      //rgb颜色随机
156
      var r = Math.floor(Math.random() * 256);
157
      var g = Math.floor(Math.random() * 256);
158
      var b = Math.floor(Math.random() * 256);
159
      var rgb = "(" + r + "," + g + "," + b + ")";
160
      return rgb;
161
    }
162
    function color16() {
163
      //十六进制颜色随机
164
      var r = Math.floor(Math.random() * 256);
165
      var g = Math.floor(Math.random() * 256);
166
      var b = Math.floor(Math.random() * 256);
167
      var color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
168
      return color;
169
    }
170
171
    function randomNum(minNum, maxNum) {
172
      return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
173
    }
174
  </script>
175
</html>
JavaScript
JavaScript HTML 布局

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！