Skip to content

Instantly share code, notes, and snippets.

@williammalo
Forked from 140bytes/LICENSE.txt
Last active October 7, 2015 01:48
Show Gist options
  • Save williammalo/3086675 to your computer and use it in GitHub Desktop.
Save williammalo/3086675 to your computer and use it in GitHub Desktop.
masonry under 140bytes

A minimalist masonry function

mason(containerElement,brickElement,brickWidth,brickHeight)

Only works with one size of brick.

The only advantage of using this over using inline-block elements is that you can use css transitions.

function(m,n,w,h,i){m=m.offsetWidth/w|0;for(i=n.length;i--;)n[i].style.left=i%m*w+"px",n[i].style.top=(i/m|0)*h+"px"}
function(m,n,w,h,i){
m=m.offsetWidth/w|0; //get the max number of bricks per row
for(i=n.length;i--;) //loop
n[i].style.left=i%m*w+"px", //calculate and set x
n[i].style.top=(i/m|0)*h+"px" //calculate and set y
}
{
"name": "theNameOfYourLibWhichMustBeAValidCamelCasedJavaScriptIdentifier",
"description": "This should be a short description of your entry.",
"keywords": [
"five",
"descriptive",
"keywords",
"or",
"fewer"
]
}
<!doctype html>
<style>
body{text-align:center;background:#999;}
nav>div{width:200px;height:123px;margin:38px;background:#777;box-sizing:border-box;position:absolute;-webkit-transition:all 1s;
box-shadow:0 0 7px -3px #000;}
nav{position:relative;display:inline-block;background:yellow}
</style>
<nav>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</nav>
<script>
//masonry container:
m=document.querySelector("nav")
//masonry bricks:
n=m.getElementsByTagName("div")
//brick dimentions:
w=n[0].offsetWidth+(parseInt((getComputedStyle(n[0],null)||n[0].currentStyle).marginLeft,10)*2)
h=n[0].offsetHeight+(parseInt((getComputedStyle(n[0],null)||n[0].currentStyle).marginTop,10)*2)
//function caller:
onload=onresize=function(){
//container resizer:
document.querySelector("nav").style.width=(((document.body.offsetWidth*0.9)/w|0)*w)+"px"
;(
//masonry function:
function(m,n,w,h,i){m=m.offsetWidth/w|0;for(i=n.length;i--;)n[i].style.left=i%m*w+"px",n[i].style.top=(i/m|0)*h+"px"}
)(m,n,w,h);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment