jQuery Masonry's website includes Beyonce's website in its showcase:
But it doesn't show how she achieved her auto-resizing effect. I ran her code through a prettifier, but it still looks very messy:
function resize() {
1024 < $(window).width() ? 0 == headerNavOpen && $("#header").css({left:-$(window).width()}) : 0 == headerNavOpen && $("#header").css({left:-1024});
$(".index .post.video").css({width:"33.2%", height:0.332 * $("#container").width() / 1.778})
}
Anybody know a simpler way of achieving the same effect?
Here's a fiddle with a basic setup: http://jsfiddle.net/CfsEb/
See http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/
designedmemory came up with a much better solution. Instead of trying to get exactly 3 columns in the layout, the columns are sized just a fraction to be less than the ideal. Then the images are sized to be just a little bit bigger to cover the gap. Brilliant!
/* not quite 33.3% */
.item { width: 33.2%; }
/* images cover up the gap */
.item img { width: 100.5%; }