Question

我在实施图库/投资组合方面遇到了麻烦，就像portfolio templates of Wix中所描绘的那样。在我的HTML中，我设置了三个div列，其中我添加了图像，我的思维过程是创建一个脚本，将每个图像（从图像列表）添加到当前具有最小高度的列。

我已经使用过CSS来确保图片在列中的宽度是一致的，并且彼此之间有边距。

我遇到的问题是脚本似乎有效，但只有在我刷新页面之后 - 否则返回的高度是无意义的值，如0px和20px，它们应该在哪里是356.2px，306.4px等，或任意图像高度值。由于返回0px，图像将进入同一列。

一些视觉效果可以更好地描述我的意思： What I get after the first refresh vs What I get before the first refresh

我已经查看了一些有类似问题的问题，许多人解释说图片可能尚未加载。我已经尝试了$(window).on('load', function...，$(img).onload，$('#gallery-holder-1').ready，...以及其他一些随机的东西，但似乎没有任何效果。

我的代码如下所示：

/* List of images */
const images = ["img1.png", "img2.png", "img3.png", "img4.png", "img5.png"];

$(document).ready(function() {
  var holder = 0; // to determine which holder to add to
  var height1 = 0; // heights of each gallery-holder
  var height2 = 0;
  var height3 = 0;

  // add all the images to the holders
  for (const image of images) {

    // get height of each holder
    height1 = $('#gallery-holder-1').css("height");
    height2 = $('#gallery-holder-2').css("height");
    height3 = $('#gallery-holder-3').css("height");

    // find smallest height
    if(height3 < height2) {
      if (height3 < height1) { holder = 3; }
      else { holder = 1; }
    }
    else {
      if (height2 < height1) { holder = 2; }
      else { holder = 1; }
    }

    // create image and append
    var img = document.createElement("img");
    img.src = image; 
    $(`#gallery-holder-${holder}`).append(img);
  }
});

有没有人知道可能是什么问题，或者更好的方法来实现像Wix那样的投资组合？

jQuery库代码仅在刷新后才有效

0 个答案: