MixItUp：排序也能这么动感

这个库的作用就是给你的元素排列过程加上动画效果。什么叫元素排列过程呢？假设我们有这么一个网页：

我们有12个元素，然后如果想要重新排列的话，MixItUp会通过一个非常炫酷的动画效果来排列元素，如图：

这是动画过程中我截的一张图，实际上一个动态效果，非常炫酷

<div id="Container">
    <div class="mix" data-my-order="1"> ... </div>
    <div class="mix" data-my-order="2"> ... </div>
    <div class="mix" data-my-order="3"> ... </div>
    <div class="mix" data-my-order="4"> ... </div>
</div>

<button class="sort" data-sort="my-order:asc">升序排列</button>

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

 

需要排列的div要添加mix类，data-my-order指定了div的顺序。

button当中的my-order:asc定义了排列方式，asc是升序，desc是降序，还有一个选项是随机。

应用这个插件，我们可以做很多好玩的东西，比如结合随机排序来做一个图片展示类的应用，或者做一个拼图类的小游戏，都很不错。

http://codepen.io/patrickkunka/pen/KisAG