同位素不使用imagesLoaded？

我正在使用jQuery Isotope创建一个水平布局，将DIV彼此相邻的100％高度对齐，并将每个DIV中的图像垂直对齐。 因此，我正在将Isotope称为这样，并且Chrome（本地）的一切正常：

$(function(){ var $container = $('#container'); $container.isotope({ itemSelector : '.itemwrap', layoutMode: 'horizontal', horizontal: { verticalAlignment: 0.5 } }); }); 

由于图像需要时间加载，它们往往会弄乱Isotope布局，所以我正在尝试使用imagesLoaded修复： http ：//isotope.metafizzy.co/appendix.html

我实现了这样的修复：

 $(function(){ var $container = $('#container'); $container.imagesLoaded( function(){ $container.isotope({ itemSelector : '.itemwrap', layoutMode: 'horizontal', horizontal: { verticalAlignment: 0.5 } }); }); }); 

使用此图像加载，同位素不再加载。 删除imagesLoaded，Isotope再次启动（但使用混乱的布局）。 有谁知道，错误在哪里？

谢谢！

Answer 1

您也可以使用此实现，因此您可以在单独加载到网格时显示图像，而不是等待加载所有内容，代码看起来像这样：

 jQuery(document).ready(function(){ // Initialize Isotope $('.grid').isotope({ itemSelector: '.item', percentPosition: true, }); // Refresh the layout of the grid each time an image gets loaded $('.grid').imagesLoadedMB().progress( function() { $('.grid').isotope('layout'); }); }); 

我个人我更喜欢使用一个准备使用的插件，就像这个： https ： //codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020这个插件你可以很容易指定之间的空间项目，每个分辨率上的列数等等，它还具有添加filter，排序和搜索字段的function，试一试！

Answer 2

我最近也遇到了同样的问题，并发现这是由于异步调用。 在加载图像加载插件之前调用$container.imagesLoaded()函数。

您只需要将$container.imagesLoaded()包装到$(document).ready()并从jquery脚本行中删除asyn attr。