Isotope Jquery插件布局问题

我想在这个网站上设置同位素，它需要处理布局，我需要能够将项目附加到容器。

问题是它似乎没有正确初始化图像，这是我如何初始化它：

$(document).ready(function(){ var $container = $('#container'); $container.isotope({ masonry: { columnWidth: 400, gutterWidth: 10 }, filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: true }, resizesContainer: true, }); load_more(); }); 

图像完全不受砌体选项的影响，如果我在CSS中指定“宽度”，我有加载问题。

load_more预先形成ajax调用，并且在成功时它使用返回的数据调用此函数：

 function data_loaded(data) { var newItems = ""; for (var i = 0; i < data['posts'].length; i++) { newItems += '
'; } /* append images*/ var $newItemsObj = $(newItems); $('#container').isotope( 'insert', $newItemsObj ); } 

该网站是http://www.hotchinesebabes.com/ 该网站是安全的工作，没有裸体图像

看起来该网站需要刷新才能正确加载，我猜这些图像第二次被捕获，所以由于在图像加载之前触发同位素，它第一次失败了？

Answer 1

同位素不起作用，因为您的图像尚未加载，因此图像的宽度和高度为0.使用https://github.com/desandro/imagesloaded或使用CSS修复图像的高度和宽度。