jQuery Masonry: Auto-resize photos like Beyonce's website

Question

jQuery Masonry's website includes Beyonce's website in its showcase:

http://iam.beyonce.com

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/

Answer 1

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%; }