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();

    }

  };

});

根据图像调整动态负载大小调整内容大小

1 个答案: