如何获得DIV的高度，该高度包含动态添加的图像

Question

我有一个小脚本，将图像添加到某些列。我希望它将图像添加到最小的列。但是，当我尝试获取列的高度时，它总是返回30px(肯定是因为图像尚未加载(

这是一些代码：

<div id="diaporama-col1" class="col-xs-4">
</div>
<div id="diaporama-col2" class="col-xs-4">
</div>
<div id="diaporama-col3" class="col-xs-4">
</div>

。

var listImgDiaporama=["resources/img/img-1.jpg", "resources/img/img-2.jpg", "resources/img/img-3.jpg", "resources/img/img-4.jpg", "resources/img/img-5.jpg", "resources/img/img-6.jpg", "resources/img/img-7.jpg", "resources/img/img-8.jpg", "resources/img/img-9.jpg", "resources/img/img-10.jpg", "resources/img/img-11.jpg"];
function addImgToDiaporama() {

    for (i = 0; i < listImgDiaporama.length; i++) {
        var col1Height = $("#diaporama-col1").height();
        var col2Height = $("#diaporama-col2").height();
        var col3Height = $("#diaporama-col3").height();
        if (col1Height <= col2Height && col1Height <= col3Height) {
            $("#diaporama-col1").append("<img src="" + listImgDiaporama[i] + ""/>")
        } else if (col2Height <= col1Height && col2Height <= col3Height) {
            $("#diaporama-col2").append("<img src="" + listImgDiaporama[i] + ""/>")
        } else {
            $("#diaporama-col3").append("<img src="" + listImgDiaporama[i] + ""/>")
        }
    }
}

有没有办法做这项工作？

Answer 1

您可以做类似的事情，在其中比较列的高度，找出最短的图像并将图像附加到它。

希望这很有帮助(有助于在全屏或https://jsfiddle.net/j9v5uwf2/1/

上查看

$('#addImage').click(function(){
  
  $shortest_column = getShortestColumn();
  $image = getRandImage();
  $($shortest_column).append($image);
});
function getShortestColumn(){
  var shortest_column = null;
  var shortest = 999999999;
  $(".column").each(function(){
    var height = $(this).height();
    if(height < shortest){
       shortest = height;
       shortest_column = $(this);  
    }    
  });
  return shortest_column;
}
function getRandImage(){
	$rn = Math.floor(Math.random() * 50) + 1
  if ($rn = 1){$image = "<img src='http://lorempixel.com/200/100/'>";}
  else {$image = "<img src='http://lorempixel.com/200/150/'>";}
  
  return $image;
}

.column {
  width:30%;
  margin-left:1%;
  margin-right:1%;
  float:left;
  background: #222;
  text-align: center;
}
img {
  max-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
  <center><button id="addImage">Add Image</button></center>
</div>
<hr>
<div class="column" id="column1">
  <img src="http://lorempixel.com/200/100/">
  <img src="http://lorempixel.com/200/150/">
</div>
<div class="column" id="column2">
  <img src="http://lorempixel.com/200/150/">
  <img src="http://lorempixel.com/200/150/">
</div>
<div class="column" id="column3">
  <img src="http://lorempixel.com/200/150/" alt="">
  <img src="http://lorempixel.com/200/100/" alt="">
</div>

Answer 2

如果您的图像全部都在一个JS调用中添加(例如，它只是通过一系列图像循环，而不是单击按钮(

我在每个图像之间仅出于演示目的添加了一个延迟，请随时将其删除以实时。

https://jsfiddle.net/g6l7mbp7/3/

$numberOfImages = 5
// Create an array of varying sized images
$images = [];
i = 0;
while (i < $numberOfImages ){
	$images[i] = getRandImage();
  i++;
}
// click button to bein inserting images
$('#addImage').click(function(){
	$($images).each(function(index,image){
    
    
    //remove the timeout bit for live, just here to demonstrate that its adding the images to the right columns
    setTimeout(function () {
    
    		$shortest_column = getShortestColumn();
        $($shortest_column).append(image);
        
    }, index*500);
   
    
	});
 
});
function addImage($image){
  $shortest_column = getShortestColumn();
  $($shortest_column).append($image);
}
function getShortestColumn(){
  var shortest_column = null;
  var shortest = 999999999;
  $(".column").each(function(){
    var height = $(this).height();
    if(height < shortest){
       shortest = height;
       shortest_column = $(this);  
    }    
  });
  return shortest_column;
}
   function getRandImage(){
   $rn = Math.floor(Math.random() * 10) + 1
   if ($rn % 2){$image = "<img src='http://lorempixel.com/200/100/'>";}
   else {$image = "<img src='http://lorempixel.com/200/200/'>";}
  
   return $image;
}

.column {
  width:30%;
  margin-left:1%;
  margin-right:1%;
  float:left;
  background: #222;
  text-align: center;
}
img {
  max-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
  <center><button id="addImage">Add Images</button></center>
</div>
<hr>
<div class="column" id="column1">
  <img src="http://lorempixel.com/200/100/">
  <img src="http://lorempixel.com/200/150/">
</div>
<div class="column" id="column2">
  <img src="http://lorempixel.com/200/150/">
  <img src="http://lorempixel.com/200/150/">
</div>
<div class="column" id="column3">
  <img src="http://lorempixel.com/200/150/" alt="">
  <img src="http://lorempixel.com/200/100/" alt="">
</div>