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

Answer 2

What they are doing is actually pretty basic, they are using the existing framework for positioning and if the screen is less than 1024 then they swapping some CSS to control width with a percentage. So looking at the posted code...

// Short Hand Version   
 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})
    }

// In more plain script
if ($(window).width() > 1024) {
   0 == headerNavOpen; 
   $("#header").css({left:-$(window).width()});
} else {
   0 == headerNavOpen;
   $("#header").css({left:-1024});

   // This is the actual part that reduces image sizes dynamically.
   $(".index .post.video").css({width:"33.2%", height:0.332 * $("#container").width() / 1.778})
}

So the above code does two things, adjusts the nav and adjusts the individual 'posts'. This is completely separate from the DOM manipulation that the jQuery is performing–think of this as just piggy backing on it. Its only behaving this way however for smaller screens. So if you wanted this to always behave this way you could simply add a class to your dom elements with a % that achieves what you are after. Otherwise you could do a window check like the above code, just omit the parts you don't need.