jQuery Masonry：像 Beyonce 的网站一样自动调整照片大小

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

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

这是一个基本设置的小提琴：http://jsfiddle.net/CfsEb/

Answer 1

见http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/

设计记忆提出了一个更好的解决方案。与其试图在布局中精确地获得 3 列，不如将列的大小调整为小于理想值的一小部分。然后图像的大小会稍微大一点以覆盖间隙。太棒了！

/* not quite 33.3% */
.item { width: 33.2%; }

/* images cover up the gap */
.item img { width: 100.5%; }

Answer 2

他们所做的实际上是非常基本的，他们使用现有的框架进行定位，如果屏幕小于 1024，那么他们会交换一些 CSS 来以百分比控制宽度。所以看看发布的代码......

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

所以上面的代码做了两件事，调整导航和调整个别的“帖子”。这与 jQuery 正在执行的 DOM 操作完全分开——可以将其视为对它的捎带。但是，对于较小的屏幕，它只能以这种方式表现。因此，如果您希望它始终以这种方式运行，您可以简单地将一个类添加到您的 dom 元素中，并使用 % 来实现您所追求的。否则你可以像上面的代码那样做一个窗口检查，只是省略你不需要的部分。