根據圖像大小調整內容大小動態加載

Question

我有一個在頁面加載時爲空的div，但圖像列表是從一個隱藏的表單數組函數動態插入的。這些圖像並不都是一樣的高度，但我已經使用css和jQuery使它們具有相同的高度。

我希望容器div與圖片列表一樣寬，右邊有1px的邊距。這段代碼可以工作，但它至少會丟失一張圖片，所以寬度不正確。

$(document).ready(function(){ 

$(function() { 
    var images = $("#itemDescription").val(); 
    var imageArray = images.split(','); 
    $.each(imageArray, function(index, value) { 
    var imageHtml = "<img class='horizontal' height='584' style='display:none' src='" + value + "" +"' alt />"; 
    $("#galleria-content").append(imageHtml); 
}); 

var accum_width = 0; 
var images = 0; 
var imagesactive = $('#galleria-container #galleria-content').find('img').length; 

$('#galleria-container #galleria-content').find('img').each(function() { 
    jQuery(this).height(584); 
    jQuery(this).width('auto'); 

    $(this).load(function(){ 
    var width = jQuery(this).width(); 
    var height = jQuery(this).height(); 
    accum_width += $(this).width(); 
    $('#galleria-content').width(accum_width); 
    }); 
}); 

    $('#galleria-container #galleria-content').find('img').fadeIn(); 

    }) 
}); 

我只是想知道是否有更好的解決方案，以圖像加載到一個div，調整圖像是584px高具有可變寬度和浮動留下一個1px的保證金右圖像;他們需要包含在一個div內;其寬度是所有圖像和邊距的總和。

非常感謝我收到的任何幫助。 全部都是最好的

Answer 1

你正在做很多不必要的DOM操作，通過它的聲音，你可以用CSS實現你想要的。將圖像設置爲{ height: 584px; width: auto; display: block; float: left; margin: 0 0 0 1px; }並給出包含div overflow: hidden將其喚醒爲漂浮圖像應該足夠了。

這樣你只需要添加JavaScript的圖像，而不用擔心試圖找出寬度;

編輯：的代碼有問題清理版本增加

$(function() { 

    var images = $("#itemDescription").val().split(',') 
    , $container = $("#galleria-content") 
    , imgCount = images.length 
    , totalWidth = 0; 

    $.each(images, function(index, value) { 

    var $img = $("<img class='horizontal' height='584' style='display:none' src='" + value + "" +"' alt />"); 
    $img.load(updateWidth); 
    $container.append($img); 

    }); 

    function updateWidth() { 

    totalWidth += $(this).outerWidth(true); 
    imgCount--; 

    if (imgCount === 0) { // all images loaded 

     $container 
     .width(totalWidth) 
     .find('img') 
     .fadeIn(); 

    } 

    }; 

});