响应等高高度与懒惰负荷

Question

我已经找到了行中响应相等高度div的这个很好的解决方案，但它不适用于lazyload。

当加载下一组div时，它们会堆叠在一起 - 没有设置高度。 知道如何为lazyload添加功能吗？

https://codepen.io/micahgodbolt/pen/FgqLc 这是代码：

<section class="main">
  <article>text....</article>
  <article>text....</article>
//.......more blocks
</section>

js：

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.main article');
});


$(window).resize(function(){
  equalheight('.main article');
});

css：

article {
  float: left;
  width: 23%;
  background: #ccc;
  margin: 10px 1%;
  padding: 1%;
}

@media all and (max-width: 900px) {
article {
    width: 48%
  }

如果您也知道更好的解决方案，请提供建议。