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/

Why are you ripping minified code from that site? The official site has good documentation on how to use the framework, why not refer to that? — Scott Sword, Feb 03 '13 at 17:14
Masonry's documentation does not seem to cover this sort of thing. — Mark Boulder, Feb 03 '13 at 19:30

score 8 · Accepted Answer · answered Feb 03 '13 at 20:29

8

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

answered Feb 03 '13 at 20:29

desandro

2,854
1
22
31

How bout the last images? There are still huge gaps there. I need something with a perfect fit on all sides, including the bottom. – droplet Jul 22 '14 at 09:00

score 1 · Answer 2 · answered Feb 03 '13 at 17:32

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.

@Desandro 's comment is what I meant by "add a class to your dom elements with a %". Super simple css solution. The only time that you would need to use any js is if you were adding exceptions. — Scott Sword, Feb 03 '13 at 20:55

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

2 Answers2