https://shop-lowrance.ru/t/v2942/images/equalheight.js

1;(function ( $ ) {
2
3    var method = {
4
5        // Считаем кол-во элементов в строке
6        countElementInRow: function ( wrap, element ) {
7            return Math.floor(wrap.width() / wrap.find(element).eq(0).outerWidth(true));
8            
9        },
10
11        // Получаем максимальную высоту элементов
12        getMaxHeight: function ( element ) {
13
14            var height = 0;
15
16            // Обнуление высоты элементов, для получения реальных значений
17            element.css({
18                'height': 'auto',
19                'min-height': 0
20            });
21
22            element.each(function() {
23
24                if ( $(this).height() > height ) {
25                    height = $(this).height();
26                };
27
28            });
29
30            return height;
31        },
32
33        // Задаём высоту элементам
34        setHeight: function ( element, height ) {
35
36            element.css('min-height', height);
37
38            return {
39                element: element,
40                height: height
41            }
42            
43        }
44
45    };
46
47    $.fn.equalHeight = function ( options ) {
48
49        var settings = $.extend({
50            // Дочерние элементы
51            child: [],
52            // Выполнение после полной загрузки страницы
53            windowLoad: false,
54
55            //CALLBACKS
56            // Выполнение функции до присвоения высоты элементам в строке
57            onRowBefore: function () {},
58            // Выполнение функции после присвоения высоты элементам в строке
59            onRowAfter: function () {},
60            // Выполнение функции до события resize
61            onResizeBefore: function () {},
62            // Выполнение функции после события resize
63            onResizeAfter: function () {},
64            // Выполнение после выполнения плагина.
65            onLoad: function () {}
66
67
68        }, options);
69
70        var element = this;
71        var wrap = $(element).parent();
72        var pluginLoader = false;
73
74
75        if ( !element.length ) {
76            return false;
77        };
78
79        function init () {
80
81            // Проходимся по каждому родителю элементов
82            wrap.each(function() {
83
84                var setup = {
85                    thisWrap : $(this),
86                    thisElement : $(this).find(element),
87                    rowCount : 1
88
89                };
90
91                // Кол-во элементов в строке
92                setup.amountInRow = method.countElementInRow(setup.thisWrap, element) || 0;
93
94                // Кол-во строк
95                setup.rowCount = Math.ceil(setup.thisElement.length/setup.amountInRow);
96
97                // Если кол-во строк больше 1
98                if ( setup.rowCount > 1 ) {
99
100                    var el = [];
101
102                    setup.thisElement.each(function( index ) {
103
104                        // Добавляем каждый элемент строки в массив
105                        el.push(this);
106
107                        // Если находимся на последнем элементе в строке 
108                        // или если это последний элемент в наборе
109                        if ( (index+1)%setup.amountInRow == 0 || !setup.thisElement[index+1] ) {
110
111                            var $el = $(el)
112
113                            settings.onRowBefore( $el );
114
115                            // Сначала задаём высоту вложенным элементам
116                            for ( var i = 0; i < settings.child.length; i++ ) {
117                                method.setHeight( 
118                                    $el.find(settings.child[i]), 
119                                    method.getMaxHeight( $el.find(settings.child[i]) )
120                                );
121                            }
122
123                            // Задаём высоту самому элементу
124                            method.setHeight( 
125                                $el, 
126                                method.getMaxHeight( $el )
127                            );
128
129                            settings.onRowAfter( $el );
130
131                            // Очищаем массив с элементами при переходе на новую строку
132                            el = [];
133
134                        };
135                        
136                    });
137
138                };
139
140                // Если кол-во строк равно единице
141                if ( setup.rowCount == 1 ) {
142
143                    settings.onRowBefore( setup.thisElement );
144
145                    // Сначала задаём высоту вложенным элементам
146                    for ( var i = 0; i < settings.child.length; i++ ) {
147                        method.setHeight( 
148                            setup.thisWrap.find(settings.child[i]), 
149                            method.getMaxHeight( setup.thisWrap.find(settings.child[i]) )
150                        );
151                    }
152
153                    // Задаём высоту самому элементу
154                    method.setHeight(
155                        setup.thisElement,
156                        method.getMaxHeight( setup.thisWrap.find(setup.thisElement))
157                    );
158
159                    settings.onRowAfter( setup.thisElement );
160
161                };
162                
163                
164            });
165            
166
167            if ( !pluginLoader ) {
168
169                settings.onLoad( element );
170                pluginLoader = true;
171
172            };
173
174        };
175
176        if ( settings.windowLoad ) {
177
178            $(window).on('load', init);
179
180        } else {
181
182            init();
183
184        };
185
186        $(window).on('resize', function() {
187            
188            settings.onResizeBefore( element );
189            init();
190            settings.onResizeAfter( element );
191            
192        });
193        
194
195        return element;
196
197    };
198    
199})( jQuery );