html - 每对响应式 jQuery 等高

Question

我有这个标记:

<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>

它是 float 的并形成一个两列列表。每篇文章因其内容而具有不同的高度。

我想要的是每对应该具有相同的高度，具体取决于两者中哪一个具有最高的高度。我发现了 equalHeights 插件的变体，但它们都强制所有元素具有相同的高度。我只需要每一对具有相同的高度，而不是所有元素。这可能吗？或者是否有任何现有的插件？

注意:无法更改文章标记，因为它是由 CMS 输出的。

我的预期输出:

|-------|---------|
|   A   |    B    |
|-------|---------|
|       |         |
|   C   |    D    |
|       |         |
|       |         |
|       |         |
|-------|---------|
|       |         |
|   E   |    F    |
|       |         |
|-------|---------|

Answer 1

这里有一些代码，它将高度设置为最大高度，按列数分割文章 block ，而不是任何其他结构方法。

演示: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;
}

如果需要的话，这可以很容易地变成一个插件。只需将其设为 $.fn 对象中的函数并使用 this 而不是项目并将列作为参数传递给函数即可。

jQuery 插件版本演示: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;
}

调用示例:

$('.wrapper article').maxSliceHeight(2);