时间戳

首页 > 解决方案 > jQuery outerHeight() 产生错误的 div 高度

javascript - jQuery outerHeight() 产生错误的 div 高度

问题描述

我创建了一个图像网格以将不同尺寸（宽度和高度）的图像排列在 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%'>");
    }
});

标签： javascriptjqueryhtmlcss

解决方案

试试这个

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

推荐阅读