jquery垂直中心不同尺寸的多个图像

Question

我有一个流畅的网格布局，3行，每行有3个不同的％宽度块。本质上，这是一个3x3网格，在视口中扩展了horz和vert，尽管宽度块不同。在每个块中，图像设置为100％宽度。

我写了这个小脚本来在块内垂直对齐这些图像，但是，margin-top对所有图像应用相同的值。我需要它将值应用于单个图像。

<script>
$(window).on('resize', function () {
var $gii = $('.grid-item-img');
var giih = $gii.height();
$gii.css('margin-top', + giih / -2 + "px");
}).trigger('resize');
</script>

grid-item-img上的CSS是：

.grid-item-img {display: block; width: 100%; position: absolute; top: 50%;}

谢谢！

Answer 1

使用jQuery .each()：

$(window).on('resize', function () {
    $('.grid-item-img').each(function(index, element) {
        var $element = $(element);
        $element.css('margin-top', + $element.height() / -2 + "px");
    });
}).trigger('resize');