https://centreforfacdev.ca/core/modules/3baeed1bff/themes/block.designers/js/scripts.js?rnd=47839

1jQuery(function($){ 
2
3    function setHeightForSubset(subset) {
4        var tallest = 0;
5        $(subset).each(function(index, event){ 
6            var height = $(event).outerHeight(); 
7            if ( height > tallest ) { tallest = height };
8        });
9        // set events to tallest height + padding
10        $(subset).css('min-height', tallest + 10);
11    }
12
13    var setEventHeights = function() {
14        // find the tallest event and set other events to have that height
15        var $events = $('.arlo .events > .arlo-event, .arlo .catalogue .arlo-catalogue-event');
16        
17        // some events might be hidden behind a 'show more', need to show them temporarily so we can see their heights
18        $(".arlo .events.arlo-show-more-hidden").show();
19
20        $events.css('min-height','auto');
21        
22        // set same height per line
23        if ($events.length) {
24            var modulo = 99;
25            var parent = $events.first().parent();
26            if (parent.hasClass('arlo-cols-5')) { modulo = 5; }
27            if (parent.hasClass('arlo-cols-4')) { modulo = 4; }
28            if (parent.hasClass('arlo-cols-3')) { modulo = 3; }
29            if (parent.hasClass('arlo-cols-2')) { modulo = 2; }
30            if (parent.hasClass('arlo-cols-1')) { modulo = 1; }
31
32            var eventsSubset = [];
33            for (var i = 0; i < $events.length; i++) {
34                eventsSubset.push($events[i]);
35
36                var zeroRemainder = (eventsSubset.length % modulo === 0); //https://stackoverflow.com/questions/16505559/how-can-i-use-modulo-operator-in-javascript
37                var successorIsDivider =  $($events[i]).nextAll('li:first').hasClass('arlo-group-divider');
38
39                // adjust heights per row
40                if (zeroRemainder || successorIsDivider) {
41                    setHeightForSubset(eventsSubset);
42                    eventsSubset = [];
43                }
44            }
45            setHeightForSubset(eventsSubset);
46        }
47
48        if($(".arlo .arlo-show-more-link-container").length > 0) {
49            $(".arlo .events.arlo-show-more-hidden").hide();
50        }
51    }
52
53    setTimeout(setEventHeights, 0)
54    
55    $(window).resize(setEventHeights);
56
57
58    var setNumberOfEventColumns = function (container) {
59        // set number of event columns based on the container width
60        var $container = $(container);
61        var $containerWidth = $container.width();
62
63        $container.removeClass('arlo-cols-5 arlo-cols-4 arlo-cols-3 arlo-cols-2 arlo-cols-1');
64
65        if ($containerWidth < 1900) {
66            $container.addClass('arlo-cols-5');
67        } if ($containerWidth < 1600) {
68            $container.addClass('arlo-cols-4');
69        } if ($containerWidth < 1200) {
70            $container.addClass('arlo-cols-3');
71        } if ($containerWidth < 850) {
72            $container.addClass('arlo-cols-2');
73        } if ($containerWidth < 670) {
74            $container.addClass('arlo-cols-1');
75        }
76    }
77
78    var eventsContainer = '.arlo .events, .arlo .catalogue';
79
80    setNumberOfEventColumns(eventsContainer);
81
82    $(window).resize(function() {
83        setNumberOfEventColumns(eventsContainer);
84    });
85    
86 });