瀑布流父容器高度自适应

https://blog.csdn.net/m0_46690660/article/details/126429117 你好请问这篇文章父容器高度要如何做自适应,可以加一下你的微信请教一下吗?

以下内容引用CHATGPT、有用望采纳：

可以通过监听图片加载完成的事件，然后重新计算父容器的高度来实现自适应。具体实现思路如下：

1. 在父容器中，设置一个 data 属性 imgList 存储所有图片的地址。

2. 在 mounted 钩子函数中，循环遍历 imgList 数组，将图片地址作为 key，将图片加载状态设置为 false，存储在一个对象中。

3. 在每个图片的 onload 事件中，将该图片的加载状态设置为 true。

4. 监听对象的变化，当所有图片都加载完成时，重新计算父容器的高度。

代码示例：

<template>
  <div ref="parent" class="parent">
    <div class="item" v-for="(item, index) in imgList" :key="index">
      <img :src="item" @load="handleImgLoad(item)">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
        // ...
      ],
      imgLoaded: {}
    }
  },
  mounted() {
    this.imgList.forEach(item => {
      this.$set(this.imgLoaded, item, false)
    })
  },
  methods: {
    handleImgLoad(key) {
      this.$set(this.imgLoaded, key, true)
      if (Object.values(this.imgLoaded).every(item => item === true)) {
        this.$nextTick(() => {
          this.$refs.parent.style.height = 'auto'
        })
      }
    }
  }
}
</script>

<style scoped>
.parent {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}

.item img {
  width: 100%;
}
</style>

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7462703
• 这篇博客也不错, 你可以看下宽度变化的情况下，如何设置高度和宽度一样
• 除此之外, 这篇博客: 两种方法实现轮播图效果中的 通过计算每一张图片高度实现滑动轮播图 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• HTML代码：

  		<div class="fate">
  			<div class="lancer">
  				<ul class="saber">
  					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  				</ul>
  			</div>
  		</div>
  		<div class="archer">
  			<button class="goup" onclick="goup()"><</button> 
  			<button class="godown" onclick="godown()">></button>
  		</div>
  
  

  CSS代码：

  * {
  	transition: all 1s;
  	margin: 0px;
  	padding: 0px;
  }
  
  .fate {
  	position: absolute;
  	top: 0%;
  	width: 512px;
  	height: 512px;
  	overflow: hidden;
  }
  
  ul li {
  	list-style: none;
  }
  .lancer{
  	position: absolute;
  	top: 0%;
  	width: 100%;
  	height: 100%;
  }
  .saber {
  	top: 0px;
  	position: absolute;
  }
  .archer{
  	position: absolute;
  }
  button {
  	z-index: 99;
  }
  
  

  JS代码：

  var index=0;
  function godown(){
  				var li = document.getElementsByTagName("li");
  				//获取单个li宽度（单张图片高度）
  				var liHeight = li[0].scrollHeight;
  				
  				var goup=document.getElementsByClassName("goup");
  				var lancer=document.getElementsByClassName("lancer")[0];
  				if(index<4){
  					index++;
  				}else{
  					index=0;
  				}
  				lancer.style.top = -index*liHeight+"px";
  			}
  function goup(){
  				var li = document.getElementsByTagName("li");
  				//获取单个li宽度（单张图片高度）
  				var liHeight = li[0].scrollHeight;
  				
  				var goup=document.getElementsByClassName("goup");
  				var lancer=document.getElementsByClassName("lancer")[0];
  				if(index>0){
  					index--;
  				}else{
  					index=4;
  				}
  				lancer.style.top = -index*liHeight+"px";
  			}
  

  如有错误望指出。

• 您还可以看一下 课工场架构师老师的电商网站高并发秒杀实战课程中的 总结及答疑小节, 巩固相关知识点
  

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
你好，关于瀑布流父容器高度自适应的问题，我们可以使用 JavaScript 动态计算瀑布流容器的高度，并根据计算结果设置容器的高度。

以下是一个简单的示例代码，仅供参考：

HTML 代码：

<div class="waterfall-container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

CSS 代码：

.waterfall-container {
  position: relative;
}

.waterfall-container .item {
  position: absolute;
  /* Item 的宽度可以设为固定值或百分比值 */
  width: 240px;
  /* 加上对应的 margin 和 padding，具体数值根据实际情况调整 */
  margin: 10px;
  padding: 16px;
  /* 在这里设置 Item 的高度 */
  /* height: ... */
}

JavaScript 代码：

window.onload = function() {
  // 获取瀑布流容器和所有 Item 元素
  var container = document.querySelector('.waterfall-container');
  var items = document.querySelectorAll('.waterfall-container .item');
  // 计算每一列的宽度和数量
  var colWidth = items[0].offsetWidth + 20; // 20 为 Item 的 margin 值
  var colNum = Math.floor(container.offsetWidth / colWidth);
  // 初始化各列的高度，记录每一列的高度和列数
  var colHeights = [];
  for (var i = 0; i < colNum; i++) {
    colHeights[i] = 0;
  }
  // 遍历所有 Item 元素，并将其位置和高度设置为最小高度的那一列
  for (var i = 0; i < items.length; i++) {
    var minColIndex = 0;
    for (var j = 1; j < colNum; j++) {
      if (colHeights[j] < colHeights[minColIndex]) {
        minColIndex = j;
      }
    }
    items[i].style.left = minColIndex * colWidth + 'px';
    items[i].style.top = colHeights[minColIndex] + 'px';
    colHeights[minColIndex] += items[i].offsetHeight + 20; // 20 为 Item 的 margin 值
  }
  // 获取最高列的高度，即为容器的高度
  var containerHeight = Math.max.apply(null, colHeights);
  container.style.height = containerHeight + 'px';
};

这样就可以实现瀑布流容器的高度自适应了。如果还有其他问题，欢迎随时提问。
如果我的回答解决了您的问题，请采纳！

父容器高度自适应 ？ 一般情况，父容器得高度是由子元素得高度撑开得，如果你子元素做了定位等相关操作都脱离了文档流，不占据页面高度，那会造成父容器高度塌陷，不知道你说的自适应是不是这个问题
瀑布流布局，一般都是绝对定位布局，或者简单的两列布局等，那绝对定位布局肯定会造成父容器高度塌陷，如果你想用父元素的高度，恐怕还不好获取，所以用多列布局+浮动，既能实现瀑布流效果，也不会让父容器高度缺失，
如果是相关问题，可以看我写的博客
希望对你有帮助