Question

我有一个相对的父元素，它具有多个绝对子元素，当屏幕变小时，该子元素会在底部包装并添加图像行。我想实现根据其子元素的高度调整大小的高度。但是，我的jquery代码在调整大小时会不断将值相加。当窗口调整大小并仅获取最后一个值时，如何获得改变的高度。

尝试将其记录在控制台上。似乎工作正常。但是，我想要的只是获取最后一个值，并在调整窗口大小时将其分配为高度。

http://evertaste-lislam.ga/ <---这是我正在使用的网站。它是首页中的图片库。

$(window).resize(function () {
  var pgContHeight = $('.pg-container').height();
  var windowWidth = $(window).width();
  if (windowWidth >= 992) {
    pgContHeight *= 2; //<--Number of rows multiplied by height of image//
  } else if (windowWidth <= 991 && windowWidth >= 768) {
    pgContHeight *= 3;
  } else if (windowWidth <= 767 && windowWidth >= 601) {
    pgContHeight *= 4;
  } else if (windowWidth <= 600) {
    pgContHeight *= 8;
  }
  $('.photo-gallery-container').css('height', +pgContHeight + 'px');
})
$(window).trigger('resize');
})

.photo-gallery-container {
  position: relative;
  margin-top: 100px;
}

.photo-gallery-row-1 {
  display: flex;
  flex-flow: wrap;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pg-container {
  width: 25%; //**Width changes via media queries**//
  position: relative;
}

.pg-container img {
  max-width: 100%;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photo-gallery-container">
  <div class="photo-gallery-row-1">  <!-- I have 3 of these positioned absolute -->
    <div class="pg-container">
      <div class="overlay"></div>
      <img src='//via.placeholder.com/350x150'>
    </div>
    <div class="pg-container">
      <div class="overlay"></div>
      <img src='//via.placeholder.com/350x150'>
    </div>
    <div class="pg-container">
      <div class="overlay"></div>
      <img src='//via.placeholder.com/350x150'>
    </div>
    <div class="pg-container">
      <div class="overlay"></div>
      <img src=//via.placeholder.com/350x150>
    </div>
    <div class="pg-container">
      <div class="overlay"></div>
      <img src='//via.placeholder.com/350x150'>
    </div>
  </div>
</div>

Answer 1

我不确定您要完成什么。那是响应式图像的画廊吗？如果是这样，您不必一定要使用javascript来达到目标。你知道填充底部的技巧吗？它允许您定义一个宽度，然后定义一个高度（通过填充底部），并与该宽度成比例（例如，您想要方形图像，则需要一个1/1比例，例如如果您的宽度为25％，则填充底部将是25％）等... 我不必在这里找到javascript的用处，但也许您的绝对位置很重要，所以我将等待您的澄清。希望我能帮上忙！

.photo-gallery-container {
    position: relative;
    margin-top:100px;
 }

.photo-gallery-row-1{
    display: flex;
    flex-flow:wrap;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: -1%;
 }

.pg-container { 
    margin: 1%;
    width: 23%;      
    height: 0;
    padding-bottom: 25%;
    position: relative;
    
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('//via.placeholder.com/350x150');
 }
 
 @media screen and (max-width:40rem) {
  .pg-container {
    width: 31%;
    padding-bottom: 31%;
  }
 }
 
 /*Etc....*/

<div class="photo-gallery-container">
  <div class="photo-gallery-row-1">
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
    <div class="pg-container">
       <div class="overlay"></div>
    </div>
  </div>
</div>

Answer 2

这个问题变得复杂，因为这种方法背后的想法以及在JS中应该如何工作。我发现我可以简单地使用data-filter，而在创建这样的图像画廊或投资组合画廊时就不用使用绝对定位的想法了。

如何根据绝对容器中响应图像的高度设置父（相对）的动态高度

2 个答案: