使用jQuery垂直對齊動態加載圖像

Question

我想動態對齊加載在div中的圖像。 我想過一個解決方案，以獲取父div的高度並獲取當前正在加載的圖像的高度，並將其從父div中減去並除以2 ..像這樣..

$(".gallery a").click(function (evt) {
      evt.preventDefault();
      $(".image").empty().append( 
      $("<img>", {src: this.href})
      );
    });

在這里我想添加這樣的東西，但我不知道確切的代碼

$("<img>", {src: this.href, style: (margin-top:350-src.height()/2})

在這里350是說我的父div高度..請給我一個代碼..我已經嘗試了所有方法，但在這些動態加載的圖像上沒有其他操作。

Answer 1

我在下面發布的代碼中的'mydesirednumber'變量包含對您的答案：“獲取父div的高度並獲取當前加載的圖像的高度，然后從父div中減去該高度並除以2”

下面的示例假定您具有這樣的DOM結構：

GALLERY
  - DIV CLASS="thatdiv"
     -IMAGE
     -IMAGE
     -IMAGE
  - A (anchor)
  - A (another anchor)...

代碼如下：

$(".gallery a").click(function (evt) {
      evt.preventDefault();
      //whatever else you wanted to do before, here
      var parentdivheight = $('.thatdiv').height();
      var imageheight = $(<<WHEREVER-CURRENTLYLOADING-IMAGE-IS>>).height();
      var mydesirednumber = (parentdivheight - imageheight)  /2 ;
       //whatever else you wanted to do after, here

    });