Skip to content

Instantly share code, notes, and snippets.

@joseluisq
Created January 21, 2014 04:38
Show Gist options
  • Save joseluisq/8534548 to your computer and use it in GitHub Desktop.
Save joseluisq/8534548 to your computer and use it in GitHub Desktop.
A Pen by Jose Luis Quintana.
<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>
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();
});
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment