javascript - 混合起来 Jquery Gallery 不在下面推送内容

Question

我正在使用名为 Mix It Up 的 jQuery Gallery 插件它无法将内容推送到下方，例如我的页脚。

这个画廊的配置方式是我设置了一些 div 元素，并在它们上应用了背景以形成画廊。当您最初加载页面时，一切都很好(如果从桌面设备加载)。但是，当您减小页面宽度时，我已经更改了画廊的布局，例如，在全宽时每行有四个元素，在较低的断点处有两个，依此类推。因此，在较低的断点处，画廊的高度会发生变化，以适应每行较少的元素。这意味着我的页脚不再被推到画廊下方。

这是我的画廊的 HTML:

    <section id="portfolio">
  <div class="portfolio-title h1">
    <h2>My <span>Work</span></h2>
    <hr/>
  </div>
  <div class="gallery-filters">
    <div class="filter" data-filter="all"><img src="asset/Portfolio/loupe.png" alt="View All"/><p>ALL</p></div>
    <div class="filter" data-filter=".category-1"><img src="asset/Portfolio/web.png" alt="Website Design"/><p>WEB</p></div>
    <div class="filter" data-filter=".category-2"><img src="asset/Portfolio/graphic design.png" alt="Graphic Design"/><p>GRAPHIC</p></div>
    <div class="filter" data-filter=".category-3"><img src="asset/Portfolio/picture.png" alt="Content Creation"/><p>CONTENT</p></div>
  </div>
  <div class="portfolio-container">
    <div class="p1 p-content category-1 mix" data-myorder="1"><div></div></div>
    <div class="p2 p-content category-1 mix" data-myorder="3"><div></div></div>
    <div class="p3 p-content category-1 mix" data-myorder="2"><div></div></div>
    <div class="p4 p-content category-1 mix" data-myorder="5"><div></div></div>
    <div class="p5 p-content category-1 mix" data-myorder="4"><div></div></div>
    <div class="p6 p-content category-2 mix" data-myorder="6"><div></div></div>
    <div class="p7 p-content category-3 mix" data-myorder="8"><div></div></div>
    <div class="p9 p-content category-3 mix" data-myorder="7"><div></div></div>
  </div>
</section>

这是我画廊的 CSS:

/*Portfolio Section */
#portfolio{
  width: 100%;
  height: auto;
}
.portfolio-title{
  text-align: center;
  padding-top: 20px;
}
.portfolio-title h2{
  color: black;
  font-weight: 300;
  margin-top: 15px;
}
.portfolio-title hr{
  width: 50px;
  background-color: black;
  height: 3px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.portfolio-container{
  width: 100%;
  height: 500px;
  font-size: 0;
  margin-top: 40px;
}
.portfolio-container div{
  width: 25%;
  height: 50%;
  background-color: #363636;
  display: inline-block;
  vertical-align: top;
  border: 1px solid rgba(0, 0, 0, 0.2);;
  box-sizing: border-box;
}
.filter{
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 360px;
  border: 1px solid black;
  cursor: pointer;
  margin: 10px 20px 10px 20px;
}
.filter p{
  font-size: 13px;
  margin-top: 5px;
}
.filter img{
  width: 40px;
  height: 40px;
  margin-top: 15px;
}
.gallery-filters{
  width: 100%;
  text-align: center;
}
.portfolio-container .mix{
  display: none;
}
.p-content div{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
.p-content div:hover{
  opacity: 0.7;
}
/*Gallery Images */
.p-content{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.p1{
  background-image: url('asset/Portfolio/web/thewebcreator.png')
}
.p2{
  background-image: url('asset/Portfolio/web/lussoegusto.png')
}
.p3{
  background-image: url('asset/Portfolio/web/akrams.png')
}
.p4{
  background-image: url('asset/Portfolio/web/adaptive-flair.png')
}
.p5{
  background-image: url('asset/Portfolio/web/codeacation.png');
}

I 我在上面包含这么多代码的原因是为了提供适当的上下文。此外。如果您访问网站 HERE然后您可以使用开发人员工具进一步检查。我相信解决方案很简单。

然而，为了增加更多的复杂性，画廊部分的高度也可以随着图像被过滤掉而动态变化，这意味着我本质上需要一种自动设置画廊高度的方法。

我花了 2 个小时试图解决这个问题。有什么想法吗？

Answer 1

容器的高度固定为 500 像素:

.portfolio-container {
    ...
    height: 500px;
    ...
}

然后您为子元素(您的网格项)设置基于百分比的高度:

.portfolio-container div {
    ...
    height: 50%;
    ...
}

如果您删除 .portfolio-container 的固定高度并添加 .portfolio-container div 的 250px，Mix It Up 插件将自动调整容器的大小以适应当前显示的元素数量。