JQuery Freemasonry: auto resize photos like Beyonce website
The jQuery Masonry site includes the Beyonce website in its showcase:
But that doesn't show how she achieved the auto-resizing effect. I ran her code through a prefix , 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})
}
Does anyone know of an easier way to achieve the same effect?
Here's a script with basic setup: http://jsfiddle.net/CfsEb/
source to share
See http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/
designmemory came up with a much better solution. Instead of trying to get exactly 3 columns in the layout, the columns are just below the ideal size. The images are then scaled slightly larger to cover the gap. Brilliant!
/* not quite 33.3% */
.item { width: 33.2%; }
/* images cover up the gap */
.item img { width: 100.5%; }
source to share
What they do is actually pretty basic, they use the existing structure for positioning, and if the screen is less than 1024 then they change the CSS to control the width with a percentage. So let's take a look 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})
}
Thus, the above code does two things: sets up navigation and sets up individual "messages". This is completely decoupled from the DOM manipulation that jQuery does - think of it like you are maintaining it. Its only behavior in this case, however, is for small screens. So if you want it to always behave like this, you could just add a class to your dom elements with a% that reaches what you are after. Otherwise, you can do window validation like the code above, just omit the parts you don't need.
source to share