使用Javascript動態圖像對齊

我有一個我必須滿足的Javascript好奇心。在開始之前，我應該讓你知道，我非常瞭解這一點可以用CSS來處理，但我想提高我的JavaScript技能，所以幽默我:)使用Javascript動態圖像對齊

爲了參考我在嘗試得到：http://codepen.io/cmegown/pen/CGhpa

假設我們有一個潛在無限數量的圖像，每個圖像包裹在一個數字設置爲顯示：內聯塊，以便它與內部圖像大小相同。這些圖像中的每一個都可以是任何尺寸，並且所需的結果是每個圖像的底部都完美對齊。這裏的踢球者是這是響應式的，所以圖像可以放大或縮小。以下是我如何實現這一點的想法：

遍歷每個圖像並找到最高的一個（outerHeight），然後獲取相同圖像的寬度（outerWidth）。從outerHeight中減去outerWidth以獲得「主」差異。通過每個圖像再次循環計算每個特定圖像的差異，並從「主」差異中減去該差異，然後將該數字應用於頂部邊距。沖洗並重復，直到每張圖像與最高圖像的底部對齊。

對不對？我認爲邏輯是合理的，我只是缺乏將這些結合在一起的技巧。對不起，超長的帖子，但任何和所有的幫助/建議表示讚賞！

來源

2013-06-29 cmegown

function alignImages() { 

    // caching selectors 
    var imgs = document.getElementsByTagName('img'), 
     maxHeight = 0; 
    for (idx in imgs) { 
    var img = imgs[idx]; 
    if (img.height > maxHeight) { 
     maxHeight = img.height; 
    } 
    } 
    for (idx in imgs) { 
    var img = imgs[idx]; 
    img.style.marginTop = (maxHeight - img.height) + "px"; 
    } 


}

來源

2013-06-29 03:44:25 Aguardientico

非常接近，但我太多的JS新手找出什麼是不正常工作在這裏。 – cmegown

儘管此代碼在上面鏈接的筆中工作得非常好，但在應用於實際項目時，每幅圖像的邊距呈指數級複合。直覺告訴我，它與項目中使用的knockout.js有關，該項目正在用於執行許多AJAX請求。 – cmegown

我仍然無法讀懂頭腦，知道如果問題中沒有設置某些條件;） – Aguardientico

使用Javascript動態圖像對齊

回答

相關問題