jquery同位素选项，用于元素上的自动高度

Question

所以我正在使用同位素masonry布局

$('section').isotope({itemSelector:'article',layoutMode:'masonry',transformsEnabled: false, animationEngine: 'jquery',masonry:{columnWidth:8}});

问题是，如果我没有在css中设置article的高度，那么项目的重叠和填充的布局看起来不太好，但是我无法为元素设置固定的高度，因为它们是博客文章，并且可以改变大小，你们有任何关于如何解决这个问题的技巧吗？

Answer 1

问题解决后，您需要致电$(window).load instead of $(document).ready(

Answer 2

var $container = $('#container').imagesLoaded( function() {
  $container.isotope({
    // options
  });
});

请参阅Isotope - imagesLoaded

Answer 3

这种情况发生的原因是同位素在加载前不知道您的图像大小。更好的方法是使用加载指示器（可能使用imageLoaded插件）加载图像，然后执行插入或附加同位素。与使用$（window）.load（）相比，您将获得平滑的导航和更快加载站点的错觉。