同位素排水沟在页面加载时不完美，但在窗口大小调整后变得完美

isotope gutter not perfect on page load but becomes perfect after window resize

本文关键字：完美 窗口大小 调整 排水沟 加载 同位素      更新时间：2023-09-26

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

我想我可以用布局函数来修复它，我想在加载文档后重新布局网格，但我不知道如何。我试着固定网格的百分比，但网格一直不适合(这真的很令人沮丧)。

请看我的小提琴

css 

    .item {
    float: left;
    height: 260px;
    background: blue;
    margin-bottom: 1%;
    overflow: hidden;
    } 
    .gutter-sizer {
    width: 1%;
    }
    .item, .grid-sizer {
        width: 24%;
    }
    .item.w2 {
        width: 49%;
    }
    .item.w3 {
        width: 74%;
    }
    .item.w4 {
        width: 99%;
    }
    .item.h2 {
        height: auto;
    }

我有这样的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>

我的脚本:

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

显示resize事件的视频

http://www.screencast.com/t/eAg23hmXtD

更简单的答案是添加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>
相关文章：