
<! Css

/* Reset */
h1, p
  text-align: center

h1
  margin-bottom: 0

/* Filters */
#filters
  text-align: center
  a
   margin-left: 10px

/* Sortlist */
#sortlist
  position: relative
  display: block
  width: 90%
  padding: 0
  margin: 2em auto

#sortlist li
  position: absolute
  width: 100px
  height: 100px
  display: block
  text-align: center
  background-color: #EDC951
  line-height: 5.6em
  overflow: hidden
  box-shadow: inset 0 0 1px 0px rgba(0, 0, 0, 0.3)
  transition: all 0.6s ease-out

#sortlist li:nth-child(2n)
  background-color: #F8EDCD

document.addEvent('domready', function(){
  var sortlist = $('sortlist'),
      w, h, sw, tw, th;  
  
  function resize() {
    w = w = sw = tw = th = 0;
    sw = sortlist.getSize().x;
    sortlist.getElements('li:not(.hidden)').each(function(li, i) {
      w = li.getSize().x;
      h = li.getSize().y;
      
      if (tw >= sw - h) {
        tw = 0;
        th += h;
      }
      
      tw += w;
      li.set('data-cords', (tw - w)+','+th);
      li.setStyles({
        '-webkit-transform': 'matrix(1,0,0,1,'+ (tw - w)+','+th+')'
      });
      
      sortlist.setStyle('height', th + h);
    });
  }
  
  
  window.addEvent('resize', function(){
    resize();
  });
  
  var filter;
  $$('a').addEvent('click', function(){
    filter = this.get('data-filter');
   
      sortlist.getElements('li').each(function(li){
        var xy = li.get('data-cords');
        
        if (filter == 'all') {
          li.setStyles({
            'opacity': '1',
            '-webkit-transform': 'matrix(1,0,0,1,'+xy+')  scale(1)'
          });
          li.removeClass('hidden');
        } else {
          if(filter == li.get('data-filter')) {
            li.setStyles({
              'opacity': '1',
              '-webkit-transform': 'matrix(1,0,0,1,'+xy+')  scale(1)'
            });
            li.removeClass('hidden');
          } else {
            li.addClass('hidden');
            li.setStyles({
            'opacity': '0',
            '-webkit-transform': 'matrix(1,0,0,1,'+xy+')  scale(0.001)'
          });
          }
        }
      });
     
    resize();
  });
  
  resize();
});

<! javascript
document.addEvent('domready', function(){
  var sortlist = $('sortlist'),
      w, h, sw, tw, th;  
  
  function resize() {
    w = w = sw = tw = th = 0;
    sw = sortlist.getSize().x;
    sortlist.getElements('li:not(.hidden)').each(function(li, i) {
      w = li.getSize().x;
      h = li.getSize().y;
      
      if (tw >= sw - h) {
        tw = 0;
        th += h;
      }
      
      tw += w;
      li.set('data-cords', (tw - w)+','+th);
      li.setStyles({
        '-webkit-transform': 'matrix(1,0,0,1,'+ (tw - w)+','+th+')'
      });
      
      sortlist.setStyle('height', th + h);
    });
  }
  
  
  window.addEvent('resize', function(){
    resize();
  });
  
  var filter;
  $$('a').addEvent('click', function(){
    filter = this.get('data-filter');
   
      sortlist.getElements('li').each(function(li){
        var xy = li.get('data-cords');
        
        if (filter == 'all') {
          li.setStyles({
            'opacity': '1',
            '-webkit-transform': 'matrix(1,0,0,1,'+xy+')  scale(1)'
          });
          li.removeClass('hidden');
        } else {
          if(filter == li.get('data-filter')) {
            li.setStyles({
              'opacity': '1',
              '-webkit-transform': 'matrix(1,0,0,1,'+xy+')  scale(1)'
            });
            li.removeClass('hidden');
          } else {
            li.addClass('hidden');
            li.setStyles({
            'opacity': '0',
            '-webkit-transform': 'matrix(1,0,0,1,'+xy+')  scale(0.001)'
          });
          }
        }
      });
     
    resize();
  });
  
  resize();
});

<! Html

%h1 Responsive Matrix Grid
%p Resize your window only !

%div#filters
  %a{:href => 'javascript:;', :data => {:filter => 'all'}} All blocks
  %a{:href => 'javascript:;', :data => {:filter => 'show'}} White blocks
  %a{:href => 'javascript:;', :data => {:filter => 'hide'}} Yellow blocks

%ul#sortlist
  - (1..60).each do |i|
    %li{:data => {:filter => i % 2 == 0 ? 'show' : 'hide'}}= i