Set equal height of div using jquery

, , ,

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('.blog-main article');
});


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

Html 

<div class="blog-main">
 <article class="col-md-4 col-sm-6 col-xs-6">
  ------------
  -----------
  -------------
  ----------- 
 </article>
 <article class="col-md-4 col-sm-6 col-xs-6">
  ------------
  -----------
 </article>
 <article class="col-md-4 col-sm-6 col-xs-6">
  ------------
  -----------
  -------------
  ----------- 
 </article>
 <article class="col-md-4 col-sm-6 col-xs-6">
  ------------
  -----------
 </article>
 <article class="col-md-4 col-sm-6 col-xs-6">
  ------------
  -----------
  -------------
  ----------- 
 </article>
 <article class="col-md-4 col-sm-6 col-xs-6">
  ------------
  -----------
 </article>
</div>

In this jQuery find the highest height of article section of each row and assign the height to other article section on relevant row





Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.