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>