https://stsl.ru/bitrix/templates/stsl_new/js/modules/gridify.js?16758823035116

1var Gridify = {
2    gridify: document.querySelectorAll('[data-gridify]'),
3    columns: [],
4    init: function() {
5
6        Array.prototype.forEach.call(this.gridify, function(grid, grid_index) {
7            var options;
8            var tabletSize = grid.getAttribute('data-gridify-tablet-width');
9            var mobileSize = grid.getAttribute('data-gridify-mob-width');
10
11            options = grid.getAttribute('data-gridify');
12            if(window.innerWidth <= tabletSize){
13                options = grid.getAttribute('data-gridify-tablet');
14            }
15            if(window.innerWidth <= mobileSize){
16                options = grid.getAttribute('data-gridify-mob');
17            }
18
19            var totalColumns = options.substr(0, options.indexOf('-columns'));
20
21            if (grid.querySelectorAll(':scope > div').length == totalColumns && grid.querySelectorAll(':scope > div')[0].getAttribute('class') == 'column size-1of' + totalColumns) {
22                return;
23            }
24
25            var items = [];
26
27            for (var c = 1; c <= totalColumns; c++) {
28
29                var column = document.createElement('div');
30                column.setAttribute('class', 'column size-1of' + totalColumns);
31
32                Gridify.columns.push(column);
33
34            }
35
36            Array.prototype.forEach.call(grid.querySelectorAll(':scope > div'), function(item_object, item_index) {
37
38                var item = document.createElement('div');
39                item.innerHTML = item_object.outerHTML.trim();
40                item = item.firstChild;
41
42                items.push(item);
43
44            });
45
46            grid.innerHTML = '';
47
48            Array.prototype.forEach.call(Gridify.columns, function(column, column_index) {
49                grid.appendChild(column);
50            });
51
52            Gridify.appendItems(items);
53
54        });
55
56    },
57    destroy: function() {
58
59        Array.prototype.forEach.call(Gridify.gridify, function(grid, index) {
60
61            if (Gridify.columns.length == 0) {
62                return;
63            }
64
65            var temp = document.createElement('div');
66            temp.setAttribute('data-items', '');
67
68            grid.appendChild(temp);
69
70            var items = [];
71
72            Array.prototype.forEach.call(grid.querySelectorAll(':scope > div'), function(column, index) {
73
74                Array.prototype.forEach.call(column.querySelectorAll(':scope > div'), function(item, item_index) {
75
76                    items.push({
77                        index: parseInt(item.getAttribute('data-index')),
78                        item: item
79                    });
80
81                });
82
83            });
84
85            items.sort(function(a, b) {
86
87                if (a.index < b.index) {
88                    return -1;
89                }
90
91                if (a.index > b.index) {
92                    return 1;
93                }
94
95                return 0;
96
97            });
98
99            Array.prototype.forEach.call(items, function(item, index) {
100                item.item.removeAttribute('data-index');
101                temp.appendChild(item.item);
102            });
103
104            Gridify.columns = [];
105            grid.innerHTML = temp.innerHTML;
106
107        });
108
109    },
110    reInit: function() {
111        Gridify.destroy();
112        Gridify.init();
113    },
114    appendItems: function(items) {
115        let max_columns = Gridify.columns.length;
116        let column_index = 1;
117        Array.prototype.forEach.call(items, function(item, index) {
118            Gridify.appendItem(item, index, column_index - 1);
119            if (column_index === max_columns) {
120                column_index = 1;
121            } else {
122                column_index++;
123            }
124        });
125
126    },
127    appendItem: function(item, index, column_index) {
128        var use_column;
129
130        if (typeof column_index !== 'undefined') {
131            use_column = {
132                column: column_index
133            };
134        } else {
135            var column_height = 0;
136            Array.prototype.forEach.call(Gridify.columns[0].querySelectorAll(':scope > div'), function(child, index) {
137                column_height += child.offsetHeight;
138            });
139
140            use_column = {
141                height: column_height,
142                column: 0
143            };
144
145            for (var c = 1; c < Gridify.columns.length; c++) {
146
147                var column_height = 0;
148                Array.prototype.forEach.call(Gridify.columns[c].querySelectorAll(':scope > div'), function(child, index) {
149                    column_height += child.offsetHeight;
150                });
151
152                if (column_height < use_column.height) {
153
154                    use_column = {
155                        height: column_height,
156                        column: c
157                    };
158
159                }
160
161            }
162        }
163
164        item.setAttribute('data-index', index);
165
166        Gridify.columns[use_column.column].appendChild(item);
167
168    }
169};
170
171let gridify = Gridify;