在元素内部内容发生变化时保持元素的第一个高度

Question

我目前有一个图片库，其中左侧有一张全尺寸图片，左侧图片库中的所有其他图片如下所示：

<div class='col-md-7'>
    <img src='something'>
</div>
<div class='col-md-5'>
    <ul>
        <li ng-repeat for all the images in the array>
            <img thumbnail for the image, on click it changes the source of the main image>
        </li>
    </ul>
</div>

问题是，图像可以有不同的高度，并且随着 img 高度的变化，主容器和每个缩略图的高度也会发生变化（因为它们会响应父尺寸）。有没有办法确定画廊的初始高度并在用户更改图像时保持这种高度？我不想设置一个静态数值，因为它应该随着屏幕大小而缩放，并且因为同一页面中可以有多个画廊，我需要每个画廊记住它自己的高度。

正如您在示例中看到的，我使用的是 bootstrap 和 angularJS 以及 jQuery，因此这些框架可用的工具是可用的。

Answer 1

获取您不希望更改高度的所有img 元素的初始offsetHeight，并将其height 设置为您获得的值。

在下面的 sn-p 中，执行此操作的行是：

img.style.height = img.offsetHeight + "px";

let gallery = [
  'https://picsum.photos/200/100/?image=1080',
  'https://picsum.photos/200/200/?image=1063',
  'https://picsum.photos/500/200/?image=1060',
  'https://picsum.photos/300/300/?image=1059',
  'https://picsum.photos/200/300/?image=1070',
  'https://picsum.photos/300/200/?image=1071'
];

let thumbs = document.getElementById("thumbnails");

for (let i = 1; i < gallery.length; i++) {
  thumbs.appendChild(thumbs.firstElementChild.cloneNode(true));
}

let img = document.querySelector(".col-md-7").firstElementChild;

gallery.forEach((url, i) => {
  thumbs.children[i].firstChild.src = url;
});

thumbs.addEventListener("click", event => {
  if (event.target.tagName === "IMG") {
    img.src = event.target.src;
  }
});

img.src = gallery[0];
img.style.height = img.offsetHeight + "px";
// The above last line is the code keeping the initial height.

#thumbnails {
  list-style-type: none;
  padding: 0;
}

#thumbnails li {
  float: left;
  height: 35px;
  width: 50px;
  margin: 10px;
  background: #fde;
}

#thumbnails img {
  width: 100%;
  height: 100%;
}

<div class='col-md-7'>
    <img>
</div>
<div class='col-md-5'>
    <ul id="thumbnails">
      <li><img></li>
    </ul>
</div>

编辑： （回答评论）

据我目前了解，您可以这样做：

HTML

每个画廊都包含在<div class="gallery"></div> 中。缩略图图片来源由ng-repeat添加

<div class="gallery">
  <div class='col-md-7'>
    <img src='something'>
  </div>

  <div class='col-md-5'>
    <ul class="thumbnails">
      <li ng-repeat="some-token">
        <img src="{{img.src}}"> 
               <!-- img.src here represents the url from each
                    iteration in your data -->
      </li>
    </ul>
  </div>
</div>

<div class="gallery">
  <div class='col-md-7'>
    <img src='something'>
  </div>

  <div class='col-md-5'>
    <ul class="thumbnails">
      <li ng-repeat="some-token">
        <img src="{{img.src}}">
      </li>
    </ul>
  </div>
</div>

JS

代码针对galleries 集合中的每个画廊运行，因此每个画廊都有自己的范围。

let galleries = document.getElementsByClassName("gallery");

[].forEach.call(galleries, gallery => {
  let image = gallery.querySelector("img");
  image.style.height = image.offsetHeight + "px"; // Initial height

  let thumbs = gallery.querySelector(".thumbnails");
  thumbs.addEventListener("click", event => {
    if (event.target.tagName === "IMG") {
      image.src = event.target.src;
    }
  });
});