MixItUp：排序也能这么动感

本文主要是介绍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

 

这篇关于MixItUp：排序也能这么动感的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---