Responsive jQuery Equal Height Per Pair - html

Question

I have this markup:
<div class="wrapper">
<article>A</article>
<article>B</article>
<article>C</article>
<article>D</article>
<article>E</article>
<article>F</article>
<article>G</article>
<article>H</article>
</div>
which is floated and forms a two-column list. Each article has a variable height due to its contents.
What I want is each pair should have the same height based on which of the two has the tallest height. I have found variations of equalHeights plugin but all of them force equal heights to all elements. I just need each pair to be the same height, not all elements. Is this possible or are there any existing plugin for this?
Note: Can't change the article markup because it's outputted by the CMS.
My expected output:
|-------|---------|
| A | B |
|-------|---------|
| | |
| C | D |
| | |
| | |
| | |
|-------|---------|
| | |
| E | F |
| | |
|-------|---------|

Answer 1

Here is a little bit of code that will set the height to the max height, splitting a block of articles by a column count, rather than any other structural method.
Demo: http://jsfiddle.net/bgWaw/
var articles = $('.wrapper article');
var columns = 2;
var cIndex = 0;
while (cIndex < articles.size()) {
var cMaxHeight = 0;
for (cColumn = 0; cColumn < columns; cColumn++) {
var cArticle = articles.eq(cIndex + cColumn);
if (cArticle.size() > 0) {
cMaxHeight = (cArticle.height() > cMaxHeight ? cArticle.height() : cMaxHeight);
}
}
articles.slice(cIndex, cIndex + columns).height(cMaxHeight);
cIndex += columns;
}
This could easily be turned in to a plugin if needed. Just a matter of making it a function in the $.fn object and using this rather than articles and passing in columns as a parameter to the function.
jQuery Plugin Version Demo: http://jsfiddle.net/bgWaw/2/
$.fn.maxSliceHeight = function(columns) {
var cIndex = 0;
while (cIndex < this.size()) {
var cMaxHeight = 0;
for (cColumn = 0; cColumn < columns; cColumn++) {
var cElem = this.eq(cIndex + cColumn);
if (cElem.size() > 0) {
cMaxHeight = (cElem.height() > cMaxHeight ? cElem.height() : cMaxHeight);
}
}
this.slice(cIndex, cIndex + columns).height(cMaxHeight);
cIndex += columns;
}
return this;
}
Example call:
$('.wrapper article').maxSliceHeight(2);

Answer 2

Contrary to my comment here is another method you can use:
Turn that markup into rows:
<div class="row">
<article>A</article>
<article>B</article>
</div>
<div class="row">
<article>C</article>
<article>D</article>
</div>
<div class="row">
<article>E</article>
<article>F</article>
</div>
Float the <article> elements again, but make sure each .row div has clear: both in the CSS.
That way every "row" will be the same height has the tallest content within it.

Answer 3

Separating by divs is a good solution if you really want always two columns, but I assume that you might want to change to three columns if the browser is wide enough. Have you looked at isotope? http://isotope.metafizzy.co/

Answer 4

I have found a solution for this without changing the markup: http://css-tricks.com/equal-height-blocks-in-rows/