https://flamecho.netlify.app/js/waterfall/waterfall.js

1function waterfall(a) {
2  function b(a, b) {
3    var c = window.getComputedStyle(b);
4    return parseFloat(c["margin" + a]) || 0;
5  }
6  function c(a) {
7    return a + "px";
8  }
9  function d(a) {
10    return parseFloat(a.style.top);
11  }
12  function e(a) {
13    return parseFloat(a.style.left);
14  }
15  function f(a) {
16    return a.clientWidth;
17  }
18  function g(a) {
19    return a.clientHeight;
20  }
21  function h(a) {
22    return d(a) + g(a) + b("Bottom", a);
23  }
24  function i(a) {
25    return e(a) + f(a) + b("Right", a);
26  }
27  function j(a) {
28    a = a.sort(function (a, b) {
29      return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a);
30    });
31  }
32  function k(b) {
33    f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a));
34  }
35
36  "string" == typeof a && (a = document.querySelector(a));
37
38  var l = [].map.call(a.children, function (a) {
39    return a;
40  });
41
42  a.style.position = "relative";
43
44  // 重置所有元素的位置样式
45  l.forEach(function(item) {
46    item.style.position = "absolute";
47    item.style.top = "";
48    item.style.left = "";
49    item.style.transition = "";
50  });
51
52  var m = [];
53  l.length && ((l[0].style.top = "0px"), (l[0].style.left = c(b("Left", l[0]))), m.push(l[0]));
54
55  for (var n = 1; n < l.length; n++) {
56    var o = l[n - 1],
57      p = l[n],
58      q = i(o) + f(p) <= f(a);
59    if (!q) break;
60    (p.style.top = o.style.top), (p.style.left = c(i(o) + b("Left", p))), m.push(p);
61  }
62
63  for (; n < l.length; n++) {
64    j(m);
65    var p = l[n],
66      r = m.pop();
67    (p.style.top = c(h(r) + b("Top", p))), (p.style.left = c(e(r))), m.push(p);
68  }
69
70  j(m);
71  var s = m[0];
72  a.style.height = c(h(s) + b("Bottom", s));
73  var t = f(a);
74
75  window.addEventListener ? window.addEventListener("resize", k) : (document.body.onresize = k);
76}