動的に追加された画像を含むdivの高さを取得する方法は？

Question

私はいくつかの列に画像を追加する小さなスクリプトを持っています。最小の列に画像を追加したいと思います。

<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> 

：しかし、私は（イメージがまだロードされていないので、確かに）それは常に30pxを返す列の高さを取得しようとすると、

ここではいくつかのコードがあります。

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

このようなことができます。ここでは、列の高さを比較し、最短値を計算してイメージを追加します。あなたのイメージは、すべての（例えばそのわずかの配列をループ1つのjsコールに追加されている場合、これは便利です

ホープ（フルスクリーンで表示したり、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

にするのに役立ちますボタンのクリックではなく画像）

デモの目的で各画像の間に遅延を追加しました。ライブのために削除してください。

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>