Mixitup无法正常工作

Question

我不知道为什么我的mixItUp插件无效。我按照项目的入门页面上的说明进行操作，我认为我按照他们的说法执行了所有操作，但它仍然无效。

代码：

 #piccontainer {
   text-align: justify;
   display: none;
   opacity: 0;
 }

<content>
  <div class="filter" data-filter="all">All</div>
  <div class="filter" data-filter=".fotobn">Black and White</div>
  <div class="filter" data-filter=".fotonature">Nature</div>
  <div class="filter" data-filter=".fotopeople">People</div>


  <ul id="piccontainer">
    <li class="mix fotobn">
      <figure>
        <img src="img/portfolio/thumbdanzafuoco.jpg" alt="The Fire Dancer" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>
    <li class="mix fotonature">
      <figure>
        <img src="img/portfolio/thumbdurdle.jpg" alt="" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>
    <li class="mix fotopeople">
      <figure>
        <img src="img/portfolio/me.jpg" alt="" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>
    <li class="mix fotopeole fotobn">
      <figure>
        <img src="img/portfolio/thumbpalestina.jpg" alt="" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>
    <li class="mix fotonature fotobn">
      <figure>
        <img src="img/portfolio/thumbdurdlebw.jpg" alt="" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>
    <li class="mix fotonature">
      <figure>
        <img src="img/portfolio/thumblighthouse.jpg" alt="" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>
    <li class="mix fotonature">
      <figure>
        <img src="img/portfolio/thumbsicily.jpg" alt="" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>
    <li class="mix fotonature">
      <figure>
        <img src="img/portfolio/thumbsunset.jpg" alt="" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>
    <li class="mix fotonature">
      <figure>
        <img src="img/portfolio/thumbwoods.jpg" alt="" />
        <figcaption>Caption</figcaption>
      </figure>
    </li>

  </ul>

</content>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/jquery.mixitup.min.js"></script>

<script>
  $(document).ready(function() {
    // Start mixitup
    $('#piccontainer').mixItUp();
  });
</script>
</body>

</html>

我还尝试使用li代替Div作为按钮，Div代替Li代替图片，但仍无效。你能解释一下我的问题在哪里吗？