我正在使用名为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');
}


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

但是,要增加进一步的复杂性,图库部分的高度还可以随着图像被滤除而动态变化,这意味着我本质上需要一种自动设置图库高度的方法。

我花了2个小时试图解决这个问题。有任何想法吗?

最佳答案

容器上的高度固定为500px:

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


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

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


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

关于javascript - 混合使用Jquery Gallery不将内容推送到下面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36102137/

10-12 12:34
查看更多