Have you ever needed to match the heights for groups of elements automatically? Insert the following snippet into your javascript file:
let maxHeight = 0;
$('[data-element="match-height"]').each(function() {
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});

$('[data-element="match-height"]').height(maxHeight);
First we loop through all the elements we tagged with the data-element and get their heights. For each element we will store the value if it’s higher than the previous one until we get the tallest element. Once done we apply the tallest height to all the elements.

Equalizing heights after image load

If you are loading images, you will find that this solution doesn’t always work. This is because document.ready is fired at the earliest possible time, which means it does not wait for external resources to be loaded in (such as images). When your images finally load, they may distort the heights of their containers after the equalization script has run, causing it too appear not too work.

Solving equalising heights with images

Bind to image loading events

This is the best solution (at the time of writing) and involves binding to the img.load event. All you have to do is get a count of how many img’s there are $(‘img’).length and then for each load, -1 from that count until you hit zero, then fire the equaliser. The caveat here is load may not fire in all browsers if the image is in the cache. Look around google/github, there should be a solution script out there. At the time of writing i found waitForImages from Alexander Dickson (untested, this is not an endorsement).

Bind to window.load event

Another more reliable solution is the window.load event. This should generally always work. However, if you check the docs out, you’ll notice this event fires after ALL external resources are loaded. This means if your images are loaded but there’s some javascript waiting to download it won’t fire until that completes. If you load the majority of your externals asynchronously and are clever with minimising, compressing and spreading the load you probably wont have any issues with this method, however a suddenly slow CDN (happens all the time) could cause issues. In both cases, you could take a dumb approach and apply fallback timers. Have the equalize script run automatically after a set few seconds just in case the event doesn’t fire or something is slow out of your control. It’s not fool proof, but in reality you’ll satisfy 99% of your visitors with this fallback if you tune the timer correctly.