Quicksand MooTools - Example1

Reorder and filter items with a nice shuffling animation.

css
<style>
#wrap {
width: 100%;
margin: 0 auto;
}

#wrap ul{
margin:0;
padding:0
}

#NaSort li {
position:relative;
width: 130px;
height: 177px;
margin:5px;
padding:0;
float: left;
text-align: center;
overflow: hidden;
font-weight:700;
color:#666
}
</style>
html
<div id='wrapper'>
<ul id='NaSort'>
<li><img src='http://directory.naprej.com/quicksand/activity-monitor.png' width='128' height='128' alt='' />0</li>
<li><img src='http://directory.naprej.com/quicksand/address-book.png' width='128' height='128' alt='' />1</li>
<li><img src='http://directory.naprej.com/quicksand/finder.png' width='128' height='128' alt='' />2</li>
<li><img src='http://directory.naprej.com/quicksand/front-row.png' width='128' height='128' alt='' />3</li>
<li><img src='http://directory.naprej.com/quicksand/google-pokemon.png' width='128' height='128' alt='' />4</li>
<li><img src='http://directory.naprej.com/quicksand/ical.png' width='128' height='128' alt='' />5</li>
<li><img src='http://directory.naprej.com/quicksand/ichat.png' width='128' height='128' alt='' />6</li>
<li><img src='http://directory.naprej.com/quicksand/interface-builder.png' width='128' height='128' alt='' />7</li>
<li><img src='http://directory.naprej.com/quicksand/ituna.png' width='128' height='128' alt='' />8</li>
<li><img src='http://directory.naprej.com/quicksand/keychain-access.png' width='128' height='128' alt='' />9</li>
<li><img src='http://directory.naprej.com/quicksand/network-utility.png' width='128' height='128' alt='' />10</li>
<li><img src='http://directory.naprej.com/quicksand/sync.png' width='128' height='128' alt='' />11</li>
<li><img src='http://directory.naprej.com/quicksand/textedit.png' width='128' height='128' alt='' />12</li>
</ul>
</div>

<p><a id='button1' href='#'>12,11,10,9,8,7,6,5,4,3,2,1,0</a></p>
<p><a id='button2' href='#'>10,5,12,7,0,6</a></p>
<p><a id='button3' href='#'>0,1,2,3,4,5,6,7,8,9,10,11,12</a></p>
js
<script>
window.addEvent('load', function(){
new NaSort();
});

var NaSort = new Class({

initialize: function(){
this.cord=[];
var ul = $('NaSort');
this.slides = $$('ul > li');
this.Cords(this.slides);

$('button1').addEvent('click', this.effects.bind(this,[12,11,10,9,8,7,6,5,4,3,2,1,0],1000));
$('button2').addEvent('click', this.effects.bind(this,[10,5,12,7,0,6],1000));
$('button3').addEvent('click', this.effects.bind(this,[0,1,2,3,4,5,6,7,8,9,10,11,12],1000));
},

effects: function(sort,time){
this.slides.each(function(el,e) {
var myEffects = new Fx.Morph(this.slides[e], {duration:time, transition: Fx.Transitions.Sine.easeOut});
if(sort.contains(e) == true){
myEffects.start({
'opacity':1,
'position':'absolute',
'left':this.cord[sort.indexOf(e)].x,
'top':this.cord[sort.indexOf(e)].y
});
}
else{
myEffects.start({
'opacity':0
});
}

}, this);

},

Cords: function(slides){
slides.each(function(el,e) {
this.cord[e] = el.getPosition();
}, this);
this.Reset();
},
Reset: function(slides){
this.effects([0,1,2,3,4,5,6,7,8,9,10,11,12],1);
}

});
</script>