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

时间:2014-06-25 08:27:24

标签: javascript jquery html css

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

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

enter image description here

所以我认为可能是在脚本的初始化中。我试着在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'
    });
  });

1 个答案:

答案 0 :(得分:0)

我正在使用它:

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

它对我有用。