Css 杰基尔；同位素后处理图像

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

在同位素文档之后，我运行了脚本，但是我的图像一直被切断。正如我所说的，我希望他们都是适合在一起，俄罗斯方块风格，填补了页面

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

---

非常感谢您的帮助。谢谢大家!

同位素文档提供了答案：您需要使用

imagesLoaded

插件。插件将等待加载同位素，直到图像加载完毕（从而设置了容器的高度）

同位素文档页

下载并调用插件，然后将您的同位素调用更改为（从文档中）：

---

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

我的室友问，我们做了一些故障排除，看起来是同位素在杰基尔把它们带进来之前就瞄准了这些图像，因此它们的高度为0。我们添加了一个非常粗糙的修复程序，让同位素在运行前等待400毫秒——它可以工作，但如果有人有更优雅的解决方案，我洗耳恭听<代码>$（文档）.ready（函数（）{window.setTimeout（函数（）{var$container=$（'.content body'）；控制台.log（'in同位素开始'）；$container.同位素（{itemSelector:'.work block'}）；}，400）；}）很漂亮，非常感谢安德鲁。工作得很有魅力。下一次我需要更彻底地查看文档。它有点隐蔽。几年前我通过谷歌搜索找到了它。祝你在新网站上好运：）

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

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