我使用JavaScript Plugin Isotope进行了演示: http://isotope.metafizzy.co/
代码:
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<ul id="crits">
<li class="crit" data-crit="*">
<a href="#">All</a>
</li>
<li class="crit" data-crit=".sports">
<a href="#">Sports</a>
</li>
<li class="crit" data-crit=".abstract">
<a href="#">Abstract</a>
</li>
<li class="crit" data-crit=".city">
<a href="#">City</a>
</li>
<li class="crit" data-crit=".technics">
<a href="#">Technics</a>
</li>
</ul>
<div id="gallery">
<div class="pic sports">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
</div>
<div class="pic abstract">
<img src="http://lorempixel.com/400/200/abstract/" alt="" />
</div>
<div class="pic sports">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
</div>
<div class="pic city">
<img src="http://lorempixel.com/400/200/city/" alt="" />
</div>
<div class="pic technics">
<img src="http://lorempixel.com/400/200/technics/" alt="" />
</div>
<div class="pic sports">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
</div>
<div class="pic city">
<img src="http://lorempixel.com/400/200/city/" alt="" />
</div>
<div class="pic abstract">
<img src="http://lorempixel.com/400/200/abstract/" alt="" />
</div>
<div class="pic sports">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
</div>
</div>
CSS
#crits {
display: flex;
justify-content: center;
}
.crit {
display: inline-block;
width: 150px;
height: 36px;
background-color: rgba(200, 200, 200, 1.0);
text-align: center;
border-radius: 12px;
margin: 0 5px;
border: 2px solid rgba(180, 180, 180, 1.0);
text-shadow: 0 2px 1px rgba(250, 250, 250, 1.0);
box-shadow: 2px 2px 1px rgba(200, 200, 200, 0.7);
}
.crit:hover {
background-color: rgba(255, 255, 255, 0.1);
font-weight: bold;
}
.active {
background-color: rgba(225, 225, 225, 0.1);
}
.crit a {
text-decoration: none;
color: rgba(50, 50, 50, 1.0);
display: inline-block;
width: 100%;
height: 100%;
line-height: 36px;
}
#gallery {
width: 1300px;
height: 700px;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
margin: 30px auto;
}
.pic {
margin: 5px;
}
.pic img {
border-radius: 12px;
box-shadow: 3px 3px 1px rgba(200, 200, 200, 0.7);
}
的jQuery
$(function() {
var gallery = $('#gallery');
$('.crit a').click(function(ev) {
ev.preventDefault();
$('.crit').removeClass('active');
var crit = $(this).parent().addClass('active').attr('data-crit');
gallery.isotope({
filter: crit
});
});
})
CodePen上的完整代码和演示:http://codepen.io/mizech/pen/WrxMjq
到目前为止,这么好。 但如果您通过单击按钮更改过滤,则可以看到颤抖/颤抖。
有人知道原因是什么以及如何消除颤抖? 我不知道......
- 更新--------
我将整个画廊放在一个div容器中。感谢andyb帮助我做出评论。
在我的CSS中,我定义了一个最小高度。因此,滚动条会显示每时间,并且#34;颤抖&#34;被阻止了。
CSS
.wrap {
min-height: 500px;
}
如果有人有更优雅的想法,那么我很乐意阅读它。