https://www.rentcoworking.com.br/view/js/fixHeightItemsList.js

1/*Uso básico:  
2Utilize o array para definir as entradas do script.
3
4Exemplo: var itemsToFix = [  { classBoxContent: 'link-segmento', classRowsContainer: 'coluna-segmento'}, 
5
6classRowsContainer: (nome da classe) //Classe de uma div que abrange todos os elementos cujo a altura deverá ser alterada. 
7Pode ser uma linha (row) ou abranger diversas linhas.
8
9classBoxContent: (nome da classe) //O conteúdo a ter o valor da altura (height) alterado. 
10Esse valor será calculado com base na maior altura do elemento de mesma classe daquela linha.
11
12Importante: esse cálculo leva em base a posição top dos elementos para reconhecê-los em mesma linha. 
13Talvez seja necessário a inserção de nova div, abrangendo o conteudo interno, para garatir que os o correto funcionamento
14
15
16Opcionais:
17Exemplo: var itemsToFix = [ { fixHeight: 20, classRow: 'carousel-inner', containerSameHeight: true, fixCarouselSlider: 'mask-slider-produtos-home'},
18fixHeight: (int) //Acrescenta o valor especificado, em pixels, à altura do container.
19containerSameHeight: (true/false) //Utiliza a maior altura do container para todos os elementos, ao invés de apenas por linha
20fixCarouselSlider: (nome da classe) //Utilize o nome da classe do carousel bootstrap. Permite o script funcionar no carousel, atualizando a cada iteração.
21*/
22var itemsToFix = {  
23
24    4: [
25        { classBoxContent: 'link-serv-dest', classRowsContainer: 'alinha-destaques' },
26    ],
27
28    7: [
29        { classBoxContent: 'link-servicos-destaque', classRowsContainer: 'bloco-info-destaque' },
30        { classBoxContent: 'height-home-equipe', classRowsContainer: 'main-home-equipe' },
31    ],
32    
33    8: [
34        { classBoxContent: 'link-serv-dest', classRowsContainer: 'alinha-destaques' },
35        { classBoxContent: 'bloco-titulo-produto', classRowsContainer: 'mask-slider-produtos'},
36        { classBoxContent: 'box-equip-text', classRowsContainer: 'row-equip-text'}
37    ],
38
39    9: [
40        { classBoxContent: 'link-noticia-destaque', classRowsContainer: 'row-noticia-destaque' },
41        { classBoxContent: 'height-equipe', classRowsContainer: 'main-equipe' },
42        { classBoxContent: 'height-equipe-desc', classRowsContainer: 'main-equipe-desc', containerSameHeight: true },
43        { containerSameHeight: true, fixHeight: 20, classBoxContent: 'height-produtos', classRowsContainer: 'main-produtos' },
44        { classBoxContent: 'height-menu', classRowsContainer: 'main-menu' },
45        { classBoxContent: 'height-menu-float', classRowsContainer: 'main-menu-float' },
46        { classBoxContent: 'height-textmult', classRowsContainer: 'home-textmult' },
47        { classBoxContent: 'height-videos', classRowsContainer: 'main-videos' },
48        { classBoxContent: 'height-home-equipe', classRowsContainer: 'main-home-equipe' },
49        { classBoxContent: 'height-home-news', classRowsContainer: 'main-home-news' },
50        { classBoxContent: 'height-home-products', classRowsContainer: 'main-home-products' },
51    ],
52    10: [
53        { classBoxContent: 'bx-noticias', classRowsContainer: 'news-row'},
54        { classBoxContent: 'bx-noticias', classRowsContainer: 'news-home-row'},
55        { classBoxContent: 'bx-arquivo', classRowsContainer: 'arc-row'},
56        { classBoxContent: 'bx-depoimentos-equipe', classRowsContainer: 'par-row'},
57    ],
58    11: [
59        { classBoxContent: 'link-equip', classRowsContainer: 'lista-parceiros '},
60        { classBoxContent: 'link-equip', classRowsContainer: 'slider-equipe-home '},
61        { classBoxContent: 'bloco-noticia-pg', classRowsContainer: 'lista-noticias'},
62        { classBoxContent: 'bloco-noticia-pg', classRowsContainer: 'alinha-destaques'},
63        { classBoxContent: 'link-servicos-destaque', classRowsContainer: 'alinha-destaques'},
64        { classBoxContent: 'area-video-cat', classRowsContainer: 'bloco-grupo-conteudo'},
65        { classBoxContent: 'area-video', classRowsContainer: 'bloco-grupo-conteudo'},
66        { classBoxContent: 'area-video-destaque', classRowsContainer: 'alinha-destaques'},
67        { classBoxContent: 'fix-height-partners', classRowsContainer: 'bloco-lateral'},
68
69    ]
70
71};
72
73
74$(function () {        
75    runFixHeightList();    
76    runFixHeightListSliders();
77});
78
79$('.tab-link').on('click', function () {
80    if(itemsToFix[NUM_MODELO]){
81        setTimeout(function() { 
82            $.each( itemsToFix[NUM_MODELO], function( index, value ){
83                fixItensRowHeight(value.classBoxContent, value.classRowsContainer, value.fixHeight, value.containerSameHeight);  
84            });  
85        }, 129);
86    }
87}).resize();
88
89
90function runFixHeightList() {
91    
92    if(itemsToFix[NUM_MODELO]) {
93        $(window).on('resize', function(){      
94                $.each( itemsToFix[NUM_MODELO], function( index, value ){
95                    fixItensRowHeight(value.classBoxContent, value.classRowsContainer, value.fixHeight, value.containerSameHeight, value.fixCarou

95selSlider);  
96                });            
97
98        }).resize();
99    }
100}
101
102
103function runFixHeightListSliders()
104{
105    if(itemsToFix[NUM_MODELO]) {
106        $.each( itemsToFix[NUM_MODELO], function( index, value ){ 
107            if(value.fixCarouselSlider) {
108                fixCarouselSlider(value.fixCarouselSlider);
109            }
110        });   
111    }
112}
113
114
115function fixItensRowHeight(classBoxContent, classRowsContainer, fixHeight = 0, containerSameHeight = false , fixCarouselSlider) {        
116    var rowsContainer = $('.' + classRowsContainer);
117    
118    rowsContainer.each(function(){  
119        var boxItens =  $(this).find('.' + classBoxContent);
120
121        if(containerSameHeight) {
122            var rowBoxItens = formatItemListByRows(boxItens);
123        } else {
124            var rowBoxItens = breakItemListByRows(boxItens);
125        }
126        
127        $.each( rowBoxItens, function( index, boxItens ){
128            
129            clearItensHeight(boxItens);   
130            
131            var maxHeight = getItensMaxHeight(boxItens);
132                        
133            if(fixHeight) {
134                maxHeight += fixHeight;
135            }
136            
137            if(containerSameHeight && fixCarouselSlider) {                
138                if(maxHeight < fixCarouselSliderMaxHeight) {
139                    maxHeight = fixCarouselSliderMaxHeight;
140                } else {
141                    fixCarouselSliderMaxHeight = maxHeight;
142                }
143            }
144            setItensHeight(boxItens, maxHeight);            
145            
146        });
147        
148    });    
149}
150
151function breakItemListByRows(allItems) {
152    var result = {};
153    
154    allItems.each(function(){ 
155        var key = $(this).offset().top;
156        pushItem(result, key, $(this));     
157    });
158    
159    return result;
160    
161}
162
163function pushItem(arrayItems, key, item) {
164    
165        if(arrayItems[key]) {
166            arrayItems[key].push(item);
167        } else {
168            arrayItems[key] = [];
169            arrayItems[key].push(item);
170        }  
171}
172
173function formatItemListByRows(allItems) {
174    var result = {};
175    
176    allItems.each(function(){ 
177        pushItem(result, 0, $(this));     
178    });
179    
180    return result;    
181}
182
183function getItensMaxHeight(boxItens) {
184    var maxHeight = 0;
185    $.each( boxItens, function( index, item ){
186        var thisH = item.outerHeight();
187        if(thisH == 0) {
188            thisH = item.height();
189        }
190        if (thisH > maxHeight) { 
191            maxHeight = thisH; 
192        }
193    });
194    return maxHeight;
195}
196
197function clearItensHeight(boxItens) {
198    $.each( boxItens, function( index, item ){
199        item.css('height', '');
200    });
201}
202
203function setItensHeight(boxItens, value) {
204    $.each( boxItens, function( index, item ){
205        item.css('height', value +'px');
206    });
207}
208

209var fixCarouselSliderMaxHeight = 0;
210
211function fixCarouselSlider(sliderClassName) {
212    $('.' + sliderClassName ).bind('slide.bs.carousel', function (e) { 
213        setTimeout( runFixHeightList, 650);
214    });
215}