JQuery matchHeight.js overlayed images

Question

I'm facing a strange behaviour while using JQuery matchHeight.js. Please take a look at the following print screen:

Overlayed images after running matchHeight.js:

If I hit F5, then the desired result comes up:

Correct layout after hitting F5:

Here is the code that creates the page:

sDB = sDB + '<div class="items-container">';
$.each(JSON.parse(data.d), function (i, item) {
    sDB = sDB + '<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">';
    sDB = sDB + '<span class="glyphicon glyphicon-heart iconCatalogOperacoes addToWishList" aria-hidden="true" data-modelo="' + item.referencia + '" data-variante="' + item.variante + '"></span>';
    sDB = sDB + '<div class="item">';
    sDB = sDB + '<img class="img-responsive addToShoppingCart imgCatalog" style="display:block;margin-left:auto;margin-right:auto;" src="' + item.IMAGEM + '" onerror="imgError(this);" alt="" data-modelo="' + item.referencia + '" data-variante="' + item.variante + '">';
    sDB = sDB + '<p class="text-center ref-identifier" style="font-family:\'Roboto Condensed\';font-weight:700;font-size:14pt;">' + item.referencia + '-' + item.variante + '</p>';
    sDB = sDB + '</div>';
    sDB = sDB + '</div>';
});
sDB = sDB + '</div>';

$('#divCatalogBody').append(sDB);

$('.item').matchHeight();

I have no idea what's causing this strange behaviour. Sometimes, it loads fine at first, but most of the times, I need to hit F5 so that the correct behaviour comes up.

Any ideas?