Even height columns and rows

even-columns.js

/**
 * MIT License
 * 
 * Copyright (c) 2016 David Gallagher
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

(function ($) {

  var storeOriginalHeight = function ($cols) {
    $cols.each(function () {
      var $col = $(this);
      $col.data('original-height', $col.css('height'));
    });

    var $groups = $cols.find('[data-even-group]');
    $groups.each(function () {
      var $group = $(this);
      $group.data('original-height', $group.css('height'));
    });
  };

  var resetHeight = function ($cols) {
    $cols.each(function () {
      var $col = $(this);
      $col.css('height', $col.data('original-height'));
    });

    var $groupItems = $cols.find('[data-even-group]');
    $groupItems.each(function () {
      var $groupItem = $(this);
      $groupItem.css('height', $groupItem.data('original-height'));
    });
  };

  var calculate = function ($row, $cols) {
    var rowWidth = $row.width();
    if (rowWidth === $row.data('last-width')) {
      return;
    }
    $row.data('last-width', rowWidth);

    var currentRow = [];
    var colWidthTotal = 0;

    resetHeight($cols);

    for (var x = 0; x < $cols.length; x++) {
      var $col = $cols.eq(x);

      if ($col.is(':hidden')) {
        continue;
      }

      var newWidth = $col.outerWidth(true) - 0.5; // - 0.5 to account for fractional rounding
      colWidthTotal += newWidth;
      if (colWidthTotal > rowWidth) {
        calculateRow($(currentRow));
        currentRow = [$cols[x]];
        colWidthTotal = newWidth;
      } else {
        currentRow.push($cols[x]);
      }
    }
    calculateRow($(currentRow));
  };

  var calculateRow = function ($cols) {
    var $groupItems = $cols.find('[data-even-group]');
    if ($cols.length < 2 || $groupItems.length === 0) {
      return;
    }

    var grouped = {};
    var maxHeights = {};
    $groupItems.each(function () {
      var $groupItem = $(this);
      var groupName = $groupItem.data('even-group');

      if (!grouped[groupName]) {
        grouped[groupName] = [];
      }
      grouped[groupName].push(this);

      var newHeight = $groupItem.height();
      if (!maxHeights[groupName] || newHeight > maxHeights[groupName]) {
        maxHeights[groupName] = newHeight;
      }
    });

    $.each(grouped, function (groupName, group) {
      $(group).height(maxHeights[groupName]);
    });

    var maxColHeight = 0;
    $cols.each(function () {
      var newHeight = $(this).height();
      if (newHeight > maxColHeight) {
        maxColHeight = newHeight;
      }
    });
    $cols.height(maxColHeight);
  };

  $('[data-even-row]').each(function () {
    var $row = $(this);
    var $cols = $row.find('[data-even-col]');
    storeOriginalHeight($cols);
    calculate($row, $cols);

    var $window = $(window);
    var resize = function () {
      calculate($row, $cols);
    };
    if ('_' in window && 'throttle' in window._) {
      resize = _.throttle(resize, 33);
    }
    $window.on('resize', resize);
  });

})(jQuery);