如何将过滤添加到Phanes模板？

Question

A year ago I bought a template html5 and I wanted to add filtering to the part where the portfolio is, but unfortunately I can not deal with it.

I searched many scripts in google, but they all have some problems with this template.

Link to the template where I want to add filtering: http://ivang-design.com/phanes/slidermp/work.html

I tried to add MixItUP and I was really close to success:

HTML

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9"></script>

<div class="controls">
  <label>Filter:</label>

  <button class="filter" data-filter="all">All</button>
  <button class="filter" data-filter=".category-1">Category 1</button>
  <button class="filter" data-filter=".category-2">Category 2</button>

  <label>Sort:</label>

  <button class="sort" data-sort="myorder:asc">Asc</button>
  <button class="sort" data-sort="myorder:desc">Desc</button>
</div>
<div id="Container" class="container">
  <div class="mix category-1" data-myorder="1"></div>
  <div class="mix category-1" data-myorder="2"></div>
  <div class="mix category-1" data-myorder="3"></div>
  <div class="mix category-2" data-myorder="4"></div>
  <div class="mix category-1" data-myorder="5"></div>
  <div class="mix category-1" data-myorder="6"></div>
  <div class="mix category-2" data-myorder="7"></div>
  <div class="mix category-2" data-myorder="8"></div>

  <div class="gap"></div>
  <div class="gap"></div>
</div>

CSS

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, button{
  font-family: 'Helvetica Neue', arial, sans-serif;
}

.controls{
  padding: 2%;
  background: #333;
  color: #eee;
}

label{
  font-weight: 300;
  margin: 0 .4em 0 0;
}

button{
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}

button.active{
  background: #68b8c4;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

.container{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  background: #68b8c4;

  -webkit-backface-visibility: hidden;
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
}

.container .mix{
  text-align: left;
  background: #03899c;
  margin-bottom: 2%;
  display: none;
}

.container .mix.category-1{
  border-top: 2px solid limegreen;
}

.container .mix.category-2{
  border-top: 2px solid yellow;
}

.container .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
}

@media all and (min-width: 420px){
  .container .mix,
  .container .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container .mix,
  .container .gap{
    width: 23.5%;
  }
}

JS

$(function(){
  $('#Container').mixItUp();
});

But during filtering filtered elements disappear and after second all elements disappear, and no longer appear.

Additionally, when I tried to use MixItUp, elements does not move as in the example.

Is there another simple way to make few categories for filtering in this template?

Thank you in advance for your help

Answer 1

I solved it with this: http://isotope.metafizzy.co/filtering.html

I'm sorry for impatience and writing post