What is the best way to retrieve the height of a div that includes an image that has been

Question

What is the best way to retrieve the height of a div that includes an image that has been

I have a script that inserts images into different columns. I want the script to insert images into the column with the smallest height. However, every time I try to check the height of the columns, it always returns 30px (likely because the images are not loaded yet).

Below is the code snippet:

<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] + "\"/>")
        }
    }
}

Is there a solution to make this functionality work correctly?

jquery html css

Answer 1

Answer №1

One way to tackle this is by comparing the height of columns and adding images to the shortest one.

If you want to see it in action, check out the code snippet at 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

One way to tackle this is by comparing the height of columns and adding images to the shortest one.

If you want to see it in action, check out the code snippet at 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 3

Answer №2

When inserting images in one js call, like looping through an array of images instead of clicking a button.

To demonstrate, I have added a delay between each image. You can remove it for live purposes.

https://jsfiddle.net/g6L7mbp7/3/

$numberOfImages = 5

// Creating an array of differently sized images
$images = [];
i = 0;
while (i < $numberOfImages ){
$images[i] = getRandImage();
  i++;
}

// Click the button to start inserting images
$('#addImage').click(function(){

$($images).each(function(index,image){
    
    
    // Remove the timeout for live use, included here for demonstration purposes
    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>

Answer 4

When inserting images in one js call, like looping through an array of images instead of clicking a button.

To demonstrate, I have added a delay between each image. You can remove it for live purposes.

https://jsfiddle.net/g6L7mbp7/3/

$numberOfImages = 5

// Creating an array of differently sized images
$images = [];
i = 0;
while (i < $numberOfImages ){
$images[i] = getRandImage();
  i++;
}

// Click the button to start inserting images
$('#addImage').click(function(){

$($images).each(function(index,image){
    
    
    // Remove the timeout for live use, included here for demonstration purposes
    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>

What is the best way to retrieve the height of a div that includes an image that has been

Answer №1

Answer №2

Similar questions

When using angular.less, the @import feature is functioning correctly but a 404 error is displayed in the

Using Kendo UI Mobile, take advantage of a button to trigger the click action of another

How can I assign a class to my Typography component in Material UI?

Ways to modify the color of table fonts and contents using inline CSS

Troublesome Display of Badges in Bootstrap 5

Show content when box is ticked

Unable to use .ajax within autocomplete function

Leveraging route configuration's scope in HTML

The divide grew wider amongst the components

Modify the scrollbar's width, color, and corner radius to customize its appearance

Error: Unable to instantiate a THREE.Scene object in Three.js due to TypeError

A guide on activating Effect in Div using just css

I'm encountering an issue with the dropify plugin where the data-allowed-file-

Why is it necessary to use quotations and plus symbols when retrieving values of objects from JSON?

Sorry, we couldn't find the page you were looking for. The request method used was GET and the request URL was http://127.0.0.1:

Hovering over an option in Vue-Bootstrap b-select

Switch the background color of the body when hovering over a link

Blending ThreeJS graphics with typical HTML/CSS pages

The function jQuery.post is transmitting special characters encoded

Convert lengthy URLs in PHP into multiple lines