Skip to content

Instantly share code, notes, and snippets.

@rainbowstudio
Created March 18, 2014 22:06
Show Gist options
  • Save rainbowstudio/9630773 to your computer and use it in GitHub Desktop.
Save rainbowstudio/9630773 to your computer and use it in GitHub Desktop.
Bloc de hauteurs égales par ligne. Utiles pour les présentations en grille
/* Thanks to CSS Tricks for pointing out this bit of jQuery
http://css-tricks.com/equal-height-blocks-in-rows/
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation.
USAGE :
$(window).load(function() {
$('.block').equalHeights();
});
$(window).resize(function(){
$('.block').equalHeights();
});
*/
(function($) {
$.fn.equalHeights = function() {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(this).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
// we just came to a new row. Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment