如何获取包含动态添加图像的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(){ 
 
\t $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){ 
 
\t $images[i] = getRandImage(); 
 
    i++; 
 
} 
 

 
// click button to bein inserting images 
 
$('#addImage').click(function(){ 
 

 
\t $($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() { 
 
    
 
    \t \t $shortest_column = getShortestColumn(); 
 
     $($shortest_column).append(image); 
 
     
 
    }, index*500); 
 
    
 
    
 
\t }); 
 
    
 
}); 
 

 
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>