当Isotop / masonry第一次加载时，它会一起弄皱如何修复？

Question

当Isotop / masonry第一次加载时，它会一起弄皱如何修复？但是在刷新之后它才恢复正常。访问this link进行检查。

Answer 1

卸载的图像可能会导致同位素布局失效并导致项目元素重叠。 imagesLoaded解决了这个问题。 Here are the instructions关于如何利用它。 Isotope v2不包含它，因此您需要在页面中下载并加载它。

Answer 2

如果您的布局包含图片，则可能需要使用imagesLoaded。

重叠项目是由布局后更改大小的项目引起的。这是由卸载的媒体：图像，web fonts，嵌入式按钮引起的。要解决此问题，您需要在所有项目的大小合适后初始化或layout。

您可以通过添加一些JS来使用ImageLoaded：

<script type="text/javascript" src="http://imagesloaded.desandro.com"></script>/imagesloaded.pkgd.min.js

// init Isotope
var $grid = $('.grid').isotope({
    // options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
});