同位素初始化将不起作用。添加slick.js carousel插件后出现图像问题

Question

我使用Desandro的Isotope.js创建了一个网格，并且它正常工作，直到我添加了slick.js，这是我选择的轮播插件。

现在，在加载时，我放在旋转木马内的图像似乎在同位素的.item容器之外作为块，并留下一个间隙搞乱网格。当我按下Firefox的响应视图时，似乎网格重新洗牌并再次显示网格的正确位置。

所以我认为可能是在脚本的初始化中。我试着在slick.js初始化后将同位素脚本放在底部，但没有效果。当我尝试$（document）.ready函数时，同位素不再工作了。

在.carousel-item上将高度从自动高度更改为固定高度消除了间隙，但事实是我使同位素响应，所以当在其他尺寸的屏幕上查看时，网格不再相等（ .carousel-item的高度小于网格的其余部分，使网格在较小的屏幕上不均匀。）

我的HTML是这样的：

<div id="container">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>

    <div class="item h2 w3">
        <div class="carousel-item">
          <div><img src="http://placeholdit.300x300"></div>
          <div><img src="http://placeholdit.300x300"></div>
          <div><img src="http://placeholdit.300x300"></div>
        </div>
    </div>

    <div class="item h2"></div>
    <div class="item w3"></div>
    <div class="item w2"></div>
</div>

这是我的初始化工作正常，但在slick.js轮播上添加图像后网格搞砸了

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

我试图在谷歌搜索同位素初始化之后添加它，但同位素根本不适用于此脚本。

$(document).ready({
  $container.imagesLoaded( function() {
    $container.isotope({
      // options
      masonry: {
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer'
      },
      itemSelector: '.item'
    })
  }
})

这不起作用

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

Answer 1

我正在使用它：

    var $container = $('.l-grid').imagesLoaded( function() {
        $container.isotope({
            itemSelector: '.block',
            gutter: 0,
            transitionDuration: 0,
            layoutMode: 'packery'
        });
    });

它对我有用。