https://www.villamosca.it/template/villamosca/js/responsive_waterfall-master/responsive_waterfall.js

1;(function (root, factory) {
2    if (typeof define === 'function' && define.amd) {
3        // AMD. Register as an anonymous module.
4        define([], factory);
5    } else if (typeof module === 'object' && module.exports) {
6        // Node. Does not work with strict CommonJS, but
7        // only CommonJS-like environments that support module.exports,
8        // like Node.
9        module.exports = factory();
10    } else {
11        // Browser globals (root is window)
12        root['Waterfall'] = factory();
13  }
14}(this, function () {
15    'use strict';
16    var Waterfall = function(opts) {
17      // define property
18      var minBoxWidth;
19      Object.defineProperty(this, 'minBoxWidth', {
20        get: function() { return minBoxWidth; },
21        set: function(value) {
22          if(value < 100) value = 100;
23          if(value > 1000) value = 1000;
24
25          minBoxWidth = value;
26        }
27      });
28
29      opts = opts || {};
30      var containerSelector = opts.containerSelector || '.wf-container';
31      var boxSelector = opts.boxSelector || '.wf-box';
32
33      // init properties
34      this.minBoxWidth = opts.minBoxWidth || 250;
35      this.columns = [];
36      this.container = document.querySelector(containerSelector);
37      this.boxes = this.container ?
38          Array.prototype.slice.call(this.container.querySelectorAll(boxSelector)) : [];
39
40      // compose once in constructor
41      this.compose();
42
43      // handle the image or something which might change size after loaded
44      var images = this.container.querySelectorAll('img'), that = this;
45      var clr;
46      for (var i = 0; i < images.length; i++) {
47        var img = images[i];
48        img.onload = function() {
49          if(clr) clearTimeout(clr);
50
51          clr = setTimeout(function() {
52            that.compose(true);
53          }, 500);
54        }
55      }
56
57      window.addEventListener('resize', function() {
58        that.compose();
59      });
60    };
61
62    // compute the number of columns under current setting
63    Waterfall.prototype.computeNumberOfColumns = function() {
64      var num = Math.floor(this.container.clientWidth / this.minBoxWidth);
65      num = num || 1; // at least one column
66
67      return num;
68    };
69
70    // init enough columns and set the width
71    Waterfall.prototype.initColumns = function(num) {
72      if(num > 0) {
73        // create column div
74        this.columns = [];
75        var width = (100 / num) + '%';
76        while(num--) {
77          var column = document.createElement('div');
78          column.className = 'wf-column';
79          column.style.width = width;
80          this.columns.push(column);
81          this.container.appendChild(column);
82        }
83      }
84    };
85
86    // get the index of shortest column
87    Waterfall.prototype.getMinHeightIndex = function() {
88      if(this.columns && this.columns.length > 0) {
89        var min = this.columns[0].clientHeight, index = 0;
90        for (var i = 1; i < this.columns.length; i++) {
91          var columnElem = this.columns[i];
92          if(columnElem.clientHeight < min) {
93            min = columnElem.clientHeight;
94            index = i;
95          }
96        }
97        return index;
98      }
99      else return -1;
100    };
101
102    // get the index of highset column
103    Waterfall.prototype.getHighestIndex = function() {
104      if(this.columns && this.columns.length > 0) {
105        var max = this.columns[0].clientHeight, index = 0;
106        for (var i = 1; i < this.columns.length; i++) {
107          var columnElem = this.columns[i];
108          if(columnElem.clientHeight > max) {
109              max = columnElem.clientHeight;
110              index = i;
111          }
112        }
113        return index;
114      }
115      else return -1;
116    };
117
118    // compose core
119    Waterfall.prototype.compose = function(force) {
120      var num = this.computeNumberOfColumns();
121      var cols = this.columns.length;
122
123      if(force || num != cols) {
124        // remove old column
125        for (var i = 0; i < this.columns.length; i++) {
126          var columnElem = this.columns[i];
127          this.container.removeChild(columnElem);
128        }
129
130        // init new column
131        this.initColumns(num);
132
133        // compose
134        for (var i = 0, l = this.boxes.length; i < l; i++) {
135          var box = this.boxes[i];
136          this.addBox(box);
137        }
138      }
139    };
140
141    // add a new box to grid
142    Waterfall.prototype.addBox = function(elem) {
143        // push if new box
144      if(this.boxes.indexOf(elem) < 0) this.boxes.push(elem);
145
146      var columnIndex = this.getMinHeightIndex();
147      if(columnIndex > -1) {
148        var column = this.columns[columnIndex];
149        column.appendChild(elem);
150      }
151    };
152
153    return Waterfall;
154}));