A Pen by Jose Luis Quintana.

index.html

<h1>Responsive Matrix Grid</h1>
<p>Resize your window only !</p>

<div id="filters">
  <a href="javascript:;" data-filter="hide">Hide white blocks</a> | 
  <a href="javascript:;" data-filter="show">Show all blocks</a>
</div>

<ul id="sortlist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
</ul>

Responsive-Matrix-Grid.markdown

Responsive Matrix Grid

Powerful animation with css3 matrix, resize your window only !

A Pen by Jose Luis Quintana on CodePen.

License.

script.js

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(data-hidden)').each(function(el, i) {
      w = el.getSize().x;
      h = el.getSize().y;
      
      if (tw >= sw - h) {
        tw = 0;
        th += h;
      }
      
      tw += w;
      
      el.setStyles({
        '-webkit-transform': 'matrix(1,0,0,1,'+ (tw - w)+','+th+')',
        '-moz-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:nth-child(2n)').each(function(li){
        
        li.setStyle('display', filter === 'hide' ? 'none' : 'block');
        li.set('data-hidden','1');
      });
      
      resize();

      
  });
  
  resize();
});

style.css

/* Reset */
h1, p {
  text-align: center;
}
h1 {
  margin-bottom: 0;
}

#filters {
  text-align: center;
}

/* 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.5s ease-out;
}
#sortlist li:nth-child(2n) {
  background-color: #E5DDCB;
}