Question

我创建了一个图像网格，以4列排列不同大小（宽度和高度）的图像。逻辑是，如果有20张图像，则应将每个图像上传到最低高度列。因此，在jQuery循环中，我得到了所有列的高度，然后对其进行排序并取最低值。然后将图像插入最低高度列。为此，在每个循环中都需要采用每列的正确高度，但是当我在每个循环中放置alert()并打印高度时，它得到的高度是错误的。我该怎么解决？

HTML：

<div class="row"> 
  <div class="column col1">
  </div>
  <div class="column col2">
  </div>  
  <div class="column col3">
  </div>
  <div class="column col4">
  </div>
</div>

CSS：

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 4px;
    height: max-content;
}

jQuery：

$(document).ready(function() {

    var filesCount = 5;

    for( i = 1; i <= filesCount; i++ ) {

        var col1 = $(".col1").outerHeight();
        var col2 = $(".col2").outerHeight();
        var col3 = $(".col3").outerHeight();
        var col4 = $(".col4").outerHeight();
        var sizes = [[col1, "col1"], [col2, "col2"], [col3, "col3"], [col4, "col4"]];
        alert(sizes);

        var min = 1000000;
        var mincol;
        for ( k = 0; k < 4; k++ ) {
            if ( sizes[k][0] < min ) {
                min = sizes[k][0];
                mincol = sizes[k][1];
            }
        }
        $("." + mincol ).append("<img alt='Image" + i + "Title' src='images/image" + i + ".jpg' style='width:100%'>");
    }
});

Answer 1

尝试一下

$(window).ready(function() {
    setTimeout(function() {
        //your code
    }, 1);
});

Answer 2

function getMinColumnByHeight () {
  var columns = [{
    class: '.col1',
    height: $('.col1').outerHeight()
  },{
    class: '.col2',
    height: $('.col2').outerHeight()
  },{
    class: '.col3',
    height: $('.col3').outerHeight()
  },{
    class: '.col4',
    height: $('.col4').outerHeight()
  }];
   
  var min = Infinity;
  var col = undefined;
  columns.forEach( (column) => {
    if (column.height < min) {
      min = column.height;
      col = column.class;
    }
  });
  
  return col;
}

function randomHeight (min,max) {
    return Math.floor(Math.random()*( max - min + 1) + min);
}

$(document).ready(function() {
  var images = 20;
  for (var i = 0; i < images; ++i) {
    var height = randomHeight(100, 300);
    var image = 'https://picsum.photos/500/' + height + '/?random';
    var column = getMinColumnByHeight();
    $(column).append("<img alt='' src='" + image + "' style='width:100%'>");
  }
});

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    height: max-content;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row"> 
  <div class="column col1">
  </div>
  <div class="column col2">
  </div>  
  <div class="column col3">
  </div>
  <div class="column col4">
  </div>
</div>

jQuery outsideHeight（）产生错误的div高度

2 个答案: