javascript - 连续 float div 的自动高度？

Question

我正在为我的客户开发一种 alltop 信息流聚合器。我把它作为一个完全流畅的响应式布局，它工作得很好，但我想做一个小的调整。

http://www.paulhanak.com/clients/topmb/index.php

我让所有的 div 都向左浮动。当你调整浏览器大小时，你会看到它适应，相应地强制 div 下降....

所以我将所有的 div 设置为 220px 的固定高度。好吧，有时底部的空间太大了。有时，标题足够长，可以很好地填满它。最终，最好有一个脚本逐行比较并通过找到每个 div 的最大高度并相应地设置其他 div 来进行适当的高度调整......

对此还有其他想法吗？

Answer 1

我想出了以下自定义 jQuery 代码来计算 div 是如何排列成行的，然后遍历每一行并为行中每个 div 的内容计算出正确的最大高度，然后设置该行中所有 div 的高度为该值。

$(window).resize(function() {
    var $blocks = $('.block'),
        firstBlockTop = $blocks.first().offset().top,
        lastOffsetTop = firstBlockTop;
    var rows = [],
        currentRow = 0,
        i, rowCount, j, colCount, height;
    $blocks.each(function(index, element) {
        var $div = $(element),
            thisOffsetTop = $div.offset().top;
        if (thisOffsetTop !== lastOffsetTop) {
            currentRow++;
        }
        rows[currentRow] = (rows[currentRow] || []);
        rows[currentRow].push($div);
        lastOffsetTop = thisOffsetTop;
    });
    console.log(rows);

    function maxHeight(array) {
        var maxHeight = -1,
            innerHeight;
        for (var i = 0, len = array.length; i < len; i++) {
            // calculate the actual total height for the inner items
            innerHeight = 0;
            array[i].children().each(function() {
                innerHeight += $(this).outerHeight(true);
            });
            maxHeight = Math.max(innerHeight, maxHeight);
        }
        return maxHeight;
    }
    // now loop through each row and set the height of each div to the max height for the row
    for (i = 0, rowCount = rows.length; i < rowCount; i++) {
        height = maxHeight(rows[i]);
        console.log('Row ' + i + ', maxHeight = ' + height);
        for (j = 0, colCount = rows[i].length; j < colCount; j++) {
            rows[i][j].height(height);
        }
    }
});​

您可以对这段代码进行轻微的性能改进，但希望它能为您提供一个良好的基线。