1

我是这里的超级新手，非常感谢我能得到的任何帮助。

我正在使用 MixItUp 插件来创建画廊。我已经用一些占位符设置了它，并且过滤器可以在 Firefox 上正常工作。然而，在 chrome 上，这些项目似乎在过渡期间四处飞来飞去，然后卡入到位。

这是代码笔： http ://codepen.io/nvenk/pen/Bpzqqv

HTML

<div class="container">
  <div class="controls">
    <button class="filter" data-filter=".photo">Photo</button>
    <button class="filter" data-filter=".art">Art</button>
    <button class="filter" data-filter="all">All</button>
  </div>

  <div class="gallery">
    <div class="mix photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
    </div>
    <div class="mix art">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
    </div>
    <div class="mix photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
    </div>
    <div class="mix art">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
    </div>
  </div>
</div>

CSS

.container .controls {
  text-align: center
}

.container .gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 3px;
  -moz-column-gap: 3px;
  column-gap: 3px;
  width: 100%
}

.container .gallery .mix img {
  width: 100%;
}

JS

$('.gallery').mixItUp({
  animation: {
    duration: 350,
    effects: 'fade translateY(40px)',
    easing: 'ease',
  }
});

依赖项是 jQuery 和 mixitup.js。

我不擅长 JS，这是我第一次使用 MixItUp，所以请原谅我错过的任何明显的事情。

4

0 回答 0