时间戳

首页 > 解决方案 > 在 jQuery 中加载时图像没有获得 Div 高度

javascript - 在 jQuery 中加载时图像没有获得 Div 高度

问题描述

我正在使用 jQuery 创建一个图像网格，其中包含不同高度的图像。我的 HTML 中有 4 列，我需要将每个上传的图像排列到最小高度列。所以我可以期待外观的页面平衡。为此，我制作了以下实时代码，但没有按预期工作。当我附加图像时，图像不会进入正确的列（最小高度列）。

$(document).ready(function() {

  var itemsToLoad = 7

  for (i = 0; i < itemsToLoad; 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"]
    ];

    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' class='a' src='images/image" + i + ".jpg' style='width:100%'>");
  }

});
.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  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>

我做了另一个实时代码，图像被<Div>不同高度的 s替换。它运行良好。当我加载一个新的 div 时，它会转到具有最小高度的正确列。

$(document).ready(function() {

  var d1 = "<div style='background-color: #aaa; height: 75px; width:100%'>75</div>";
  var d2 = "<div style='background-color: #faa; height: 175px; width:100%'>175</div>";
  var d3 = "<div style='background-color: #afa; height: 95px; width:100%'>95</div>";
  var d4 = "<div style='background-color: #aaf; height: 45px; width:100%'>45</div>";
  var d5 = "<div style='background-color: #ffa; height: 75px; width:100%'>75</div>";
  var d6 = "<div style='background-color: #faf; height: 115px; width:100%'>115</div>";
  var d7 = "<div style='background-color: #aff; height: 125px; width:100%'>115</div>";
  var d8 = "<div style='background-color: #333; height: 155px; width:100%'>115</div>";
  var d9 = "<div style='background-color: #abc; height: 25px; width:100%'>115</div>";
  var d10 = "<div style='background-color: #cba; height: 105px; width:100%'>115</div>";

  var arr = [d1, d2, d3, d4, d5, d6, d7, d8, d9, d10];

  var itemsToLoad = 7

  for (i = 0; i < itemsToLoad; 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"]
    ];

    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(arr[i]);
  }

});
.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  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>

为什么图像不能这样工作？

标签： javascriptjqueryhtmlcss

解决方案

这似乎可以解决问题。

首先，我将图像附加到一个隐藏的容器中。此处将加载图像。所有图像都会获得一个 onload 事件处理程序，该处理程序将根据您的逻辑将图像移动到右列。

注意：图像添加到列的顺序有点随机，因为加载图像是异步的。

$(document).ready(function() {

  var itemsToLoad = 7

  for (i = 0; i < itemsToLoad; i++) {
    //Code used to load dummy images starting with big size (700)
    var height = (itemsToLoad - i) * 50;
    
    var $img = $('<img>');    
    $img.attr('src', 'https://dummyimage.com/100x' + height + '/000/0011ff.png');
    $img.width('100%');
    $img.on('load', function() {
      //once the image is loaded move it to the proper column
      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"]
      ];
      var min = 1000000;
      var mincol;
      for (k = 0; k < 4; k++) {
        if (sizes[k][0] < min) {
          min = sizes[k][0];
          mincol = sizes[k][1];
        }
      }
      $(this).appendTo("." + mincol);
    });
    $("#imagePreloaded").append($img);
  }
});
.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 25%;
  max-width: 25%;
  height: max-content;
}

#imagePreloaded {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div id="imagePreloaded">
  </div>
  <div class="column col1">
  </div>
  <div class="column col2">
  </div>
  <div class="column col3">
  </div>
  <div class="column col4">
  </div>
</div>

推荐阅读