jQuery的上列表中的項目動態高度

我有一個容器（將有更多的）中，用內部列表項，每個包含的圖像。容器的高度相對於列表項的高度是動態的，列表項自身在媒體查詢中更改。容器具有最小高度，因此當圖像較大時，想法是調整容器的大小，以便滑落。

當前頁面加載時，我正在獲取圖像列表項的高度，但這不是很好，因爲它們有很多圖像，所以它可能需要一段時間才能進行調整。

不幸的是，這是一個相當大的項目，我不能完全複製jsfiddle中的場景，我認爲這足夠接近。

解決方案

我需要得到的第一印象列表項的高度負荷，然後使容器內的相同高度的某種方式。

代碼

HTML

<ul class="container"> 
    <li class="img"> 
     <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" /> 
    </li> 
    <li class="img"> 
     <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" /> 
    </li> 
    <li class="img"> 
     <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" /> 
    </li> 
...so on 
</ul>

CSS

li { 
    list-style: none; 
} 
.img { 
    float: left; 
    height: 100px; 
    overflow: hidden; 
    width: 50px; 
} 
.container { 
    border:5px solid green; 
    width:100%; 
    overflow: hidden; 
    min-height:100px; 
} 
@media only screen and (max-width: 500px) { 
    .img { 
     width: 25%; height: auto; 
    } 

}

點的js

$(window).load(function() { 

    $('.container').each(function() { 
     $(this).animate({ 
      height: $('.img').height(), 
      slideDown: 'fast' 
     }); 
    }); 

});

演示

http://jsfiddle.net/ZwQu7/1/

謝謝你們的時間。

來源

2013-08-07 Xareyo

Did not get ur question..Plz be more specific ...？您是否希望將容器的高度動態更改爲圖像... –

@ user1145009是的，因爲圖像大小取決於屏幕尺寸 – Xareyo

或者你可以做這樣的：

$('.container').each(function() { 
    $(this).find('img').load(function(){ 
     $(this).closest('.container').animate({ 
      height: $(this).height(), 
      slideDown: 'fast' 
     }); 
    }) 
});

這樣，你等待圖像加載（所以你會知道圖像的高度）並在此之後進行動畫處理。

（li不會有高度，img會。）

如果你只想動畫container一旦你可以檢查它想：

$('.container').each(function() { 
    $(this).find('img').load(function(){ 
     $(this).closest('.container:not(.animated)').animate({ 
      height: $(this).height(), 
      slideDown: 'fast' 
     }).addClass('animated'); 
    }) 
});

但作爲第一個圖像加載，將盡快動畫，之後將無法運行動畫。

來源

2013-08-07 11:24:57 putvande

我認爲這與我之後的接近，儘管它需要一些調整以適應。謝謝。 – Xareyo

你需要調整什麼？如果這個解決方案有助於解決最初的問題，你能接受嗎？ – putvande

正如我在OP中指出的那樣，這是我正在開發的一個相當大的項目，所以我給出的例子非常接近實際的代碼。 – Xareyo

必須先加載圖像，然後才能訪問它們的實際尺寸，但可以使用getimagesize()來計算服務器端的總初始尺寸（假設您使用的是php）。或者如果你知道所有圖像的大小（我看到你寫了100px），你可以乘以他們的初始數字來獲得總高度。

或者添加像素容器的高度圖像加載：

$('.container img').on('load', function() { 
    var $c = $(this).parents('.container'); 
    $c.css('height', (($c.height() || 0) + this.height) + 'px'); 
});

來源

2013-08-07 11:21:05 Virus721

Thankyou，這可能是一個回退選項，但它需要是客戶端邊，加上'.img'尺寸是一個紅色的鯡魚，因爲這是原始實施（我需要刪除）。 – Xareyo

編輯我的答案。 – Virus721

謝謝你的建議。 – Xareyo

這是我設法工作（如果有人有興趣）的解決方案，這要歸功於putvande：

$('.container').each(function() { 
    $(this).find('img').load(function(){ 
     $(this).closest('.container').animate({ 
      height: $('.img').height(), 
      slideDown: 'fast' 
     }); 
    }); 
});

再次，三江源所有您的輸入。 Y.

來源

2013-08-07 12:35:26 Xareyo

jQuery的上列表中的項目動態高度

回答

相關問題