JQuery - Equalize Plugin

http://stephenakins.blogspot.de/2011/01/uniform-div-heights-for-liquid-css-p.html (original von Stephan Akins)

https://css-tricks.com/equal-height-blocks-in-rows/ (Modifizierte Version etwas effektiverer Code)

Equal Heights - JavaScript (ohne jQuery)

// IIFE
(function() {
  var currentTallest = 0,
  currentRowStart = 0,
  rowDivs = new Array();

  function setConformingHeight(el, newHeight) {
    // set the height to something new, but remember the original height in case things change
    el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
    el.height(newHeight);
  }

  function getOriginalHeight(el) {
    // if the height has changed, send the originalHeight
    return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
  }

  function columnConform() {
    // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
    $('.blocks').each(function() {
      // "caching"
      var $el = $(this);
      var topPosition = $el.position().top;
      if (currentRowStart != topPosition) {
        // we just came to a new row. Set all the heights on the completed row
        for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row 
        rowDivs.length = 0; // empty the array 
        currentRowStart = topPosition; 
        currentTallest = getOriginalHeight($el); 
        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 < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); 
      } 
    }); 
    // do the last row 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
      setConformingHeight(rowDivs[currentDiv], currentTallest); 
    } 
  } 
  // If the content might change... probably debounce this and run it. 
  // $(window).resize(function() { 
  // columnConform(); 
  // }); // DOM Ready 
// You might also want to wait until window.onload if images are the things that are unequalizing the blocks $(function() { columnConform(); }); })(); $('.blocks') would be changed to use whatever CSS selector you need to equalize. Or have the function accept a selector as a param or something.

Original von Stephan Akins

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

function setConformingHeight(el, newHeight) {
 // set the height to something new, but remember the original height in case things change
 el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
 el.height(newHeight);
}

function getOriginalHeight(el) {
 // if the height has changed, send the originalHeight
 return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform() {

 // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
 $('div.column').each(function(index) {

  if(currentRowStart != $(this).position().top) {

   // we just came to a new row.  Set all the heights on the completed row
   for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

   // set the variables for the new row
   rowDivs.length = 0; // empty the array
   currentRowStart = $(this).position().top;
   currentTallest = getOriginalHeight($(this));
   rowDivs.push($(this));

  } else {

   // another div on the current row.  Add it to the list and check if it's taller
   rowDivs.push($(this));
   currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);

  }
  // do the last row
  for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

 });

}


$(window).resize(function() {
 columnConform();
});

$(document).ready(function() {
 columnConform();
});

(the above code assumes you have assigned the CSS class called "column" to each of the DIVs that are "Floating Left")

If you can read Javascript/jQuery, you will find the code comments will sufficiently explain how it works; but in a nutshell: The script goes through each DIV, determining which are on the same row by comparing the X value of the top of each container. It keeps track of which is the tallest, and then sets the height for each DIV in the row based on that value.