0

我需要遍历一系列图像（数量未知）并获得最高图像的 outerHeight 值。然后我需要遍历所有其他图像并获取它们的 outerHeight 并从最高的 outerHeight 中减去它，然后将该差异应用于该图像的上边距。最终结果将是所有图像底部对齐，是的，我知道这可以通过 CSS 完成。这是我到目前为止所拥有的：

的HTML

<ul class="hlist">
    <li>
        <figure>
            <img src="any-size.jpg" />
        </figure>
    </li>
</ul>

jQuery

// This is what I have so far, most likely not right...
function createGrid() {
    var imgs = $('.hlist figure > img');
    var imgHeight = $(this).outerHeight();
    var maxImgHeight = 0;

    imgs.each(function () {
        maxImgHeight = maxImgHeight > imgHeight ? maxImgHeight : imgHeight;
    });
}
createGrid();

所以我认为maxImgHeight此时应该有最高图像的高度（不确定），但除此之外，我缺乏 JS 技能开始发光。我相信我需要再次遍历图像并针对 测试每个高度maxImgHeight，然后将该差异应用于上边距。

非常感谢这里的任何帮助，特别是如果它是一个很好的评论和很好解释的帮助:) 谢谢！

4

2 回答 2

2

尝试这个：

function createGrid() {
    var imgs = $('.hlist figure > img');
    var maxImgHeight = 0;

    imgs.each(function () {
        var imgHeight = $(this).outerHeight();
        maxImgHeight = maxImgHeight > imgHeight ? maxImgHeight : imgHeight;
    });
    imgs.each(function () {
        var margin = maxImgHeight > $(this).outerHeight() ? (maxImgHeight - $(this).outerHeight()) : 0;
        $(this).css("margin-top", (margin + "px"));
    });
}

第一个each循环查找最高高度并将其存储在 中maxImgHeight，正如您最初计划的那样。第二个each循环计算并应用每个图像的边距。条件赋值将导致margin-top最高图像的 为 0。

于 2013-07-02T01:41:33.500 回答
1 
function createGrid() {
    var imgs = $('.hlist figure > img'),
        maxImgHeight = 0;

    imgs.each(function () {
        var imgHeight = $(this).outerHeight(true);
        if (imgHeight > maxImgHeight) {
          maxImgHeight = imgHeight;
        }
    });
    imgs.each(function () {
        this.css('margin-top', (maxHeight - $(this).outerHeight(true)) + "px");
    });
}
createGrid();
于 2013-07-02T02:06:30.630 回答