Javascript 流沙，动画结束时突然替换

我购买了一个html模板，但我对实现的quicksand插件有一个问题

问题是，一旦我使用流沙更改内容，它最终就会出现问题。图片被转移到其他地方，但最后它们以一种非常刺耳和突然的方式被更改为正确的输出图片

我只更改了html代码，因此.js文件中没有任何内容。 在这里您可以看到问题： 点击过滤器，你就会明白我的意思

有人知道是什么导致了这个问题吗？提前谢谢

干杯，

---

请注意这一点。在列表元素中，li元素的数据id在第14个li之后重复。从id-1再次开始

 <li data-id="id-1" class="photo">
    <a href="http://marcknoll.com/images/preview/canals.jpg" rel="image_group">
      <img src="work_files/work_1.jpg" alt="Work Image">
    </a>
 </li>
 <li data-id="id-2" class="photo">
    <a href="http://marcknoll.com/images/preview/bikes.jpg" rel="image_group">
       <img src="work_files/work_2.jpg" alt="Work Image">
    </a>
 </li>
 <li data-id="id-3" class="photo">
    <a href="http://marcknoll.com/images/preview/fountain.jpg" rel="image_group">
       <img src="work_files/work_3.jpg" alt="Work Image">
    </a>
 </li>
 ..........
 ..........
 ..........
 ..........
 ..........
 <li data-id="id-14" class="photo">
  <a href="http://marcknoll.com/images/preview/water1.jpg" rel="image_group">
    <img src="work_files/work_12.jpg" alt="Work Image">
  </a>
</li>
<li data-id="id-1" class="photo">   // data-id repeating
  <a href="http://marcknoll.com/images/preview/sony.jpg" rel="image_group">
    <img src="work_files/work_13.jpg" alt="Work Image">
  </a>
</li>

..........
..........
..........
..........
..........


//数据id重复

为了让插件quicksand工作，每个li的数据id应该是唯一的。这是我注意到的第一个问题

编辑：

---

确认。这就是问题所在。我给出了数据idid-1，id-2，id-3，id-4，id-5id-47，id-48现在它工作正常。

是的，它工作正常。我想我在复制行以添加其他元素时没有看到它。一个典型的新手错误；）非常感谢您的快速回答！好，现在还有一个小问题。我把它修好了，放在网上了。离线时，我在Chrome上试用过，效果非常好，但当我在线访问页面时，动画效果有点糟糕。图片相互叠加，然后跳转到它们的位置。在firefox中，我没有这个问题。