jQuery 砌体 : Auto-resize photos like Beyonce's website

Question

jQuery Masonry 的网站在其展示中包含 Beyonce 的网站:

http://iam.beyonce.com

但它没有显示她如何实现自动调整大小的效果。 I ran her code through a prettifier ，但看起来还是很乱:

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})
}

有人知道达到相同效果的更简单方法吗？

这是一个基本设置的 fiddle :http://jsfiddle.net/CfsEb/

Answer 1

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