Javascript 页面加载时不完美，但在调整窗口大小后变得完美

我有一个响应同位素网格，当它加载网格时，水平边沟明显大于底部边沟，但当我调整窗口大小时，它变得相等

我想我可以用relayat函数来修复它，我想在它加载文档后重新启动网格，但我不知道如何。我尝试过调整网格的百分比，但是网格一直不合适（这真的很令人沮丧）

css

我有这样的html

<div id="container">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item h2 w3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item w2"></div>
<div class="item w3"></div>
<div class="item"></div>

一个视频显示了事件的大小

---

更简单的答案是添加imagesloaded脚本。页面将首先加载图像，然后在加载后重新显示网格。我的错误是我包含了imagesLoaded脚本，但之前没有添加实际的imagesLoaded插件

<script src="inc/isotope/js/isotope.pkgd.min.js"></script>
<script src="inc/isotope/js/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">

// initialize Isotope
var $container = $('#container').isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
  }
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});

</script>

//初始化同位素
var$container=$（'#container'）。同位素({
//选择权
itemSelector:“.item”，
砌体：{
columnWidth:“.grid sizer”，
排水沟：“.排水沟尺寸”
}
});
//加载所有图像后，请重新布局
$container.imagesLoaded（函数（）{
$container.同位素（'layout'）；
});

      var $container = $('#container');
  // init
  $container.isotope({
      // options
      masonry: {
          columnWidth: '.grid-sizer',
          gutter: '.gutter-sizer'
      },
      itemSelector: '.item'
  });

<script src="inc/isotope/js/isotope.pkgd.min.js"></script>
<script src="inc/isotope/js/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">

// initialize Isotope
var $container = $('#container').isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
  }
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});

</script>