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最初に計画したとおり、最も高い高さを探して に格納します。2 番目の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 に答える