Question

我需要遍历一系列图像（数字未知）并获得最高图像的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测试每个高度，然后将该差异应用于上边距。

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

Answer 1

试试这个：

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。

Answer 2

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();

jQuery - 获得最高图像的高度，将其他图像的高度差应用于上边距

2 个答案: