Question

我使用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;
}

如果有人有更优雅的想法，那么我很乐意阅读它。

JavaScript同位素插件 - ＆＃34;颤抖＆＃34;图库的

0 个答案: