杰基尔和;同位素 - 后期图像被切断

Question

我已经在我的个人网站上使用Jekyll一段时间了，我喜欢它，但最近我决定改变一下。我正在使用Jekyll / liquid功能显示与主页上每个项目/帖子相关的预览图像，然后链接到各自的完整帖子。我想使用Isotope在页面上很好地整合所有这些预览图像。

在Isotope文档之后，我让脚本运行，但我的图像不断被切断。正如我所说，我希望他们能够融合在一起，俄罗斯方块风格，填满页面。

它们现在只是测试图像，边框仅用于调试目的。所有代码都是available on github来浏览。

非常感谢任何帮助。谢谢！

Answer 1

Isotope文档提供了答案：您需要使用imagesLoaded插件。该插件将等待加载Isotope，直到之后图像已加载（因此已设置容器的高度）。

Isotope doc page here。

下载并调用插件，然后将您的Isotope调用更改为（来自文档）：

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.isotope({
    // options...
  });
});

或者，如果图像的高度相同，则可以使用CSS设置图像容器的高度。