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/

查看

＆＃13;

$('#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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何获得包含动态添加图像的div的高度？

2 个答案: