我使用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'
});
});
答案 0 :(得分:0)
我正在使用它:
var $container = $('.l-grid').imagesLoaded( function() {
$container.isotope({
itemSelector: '.block',
gutter: 0,
transitionDuration: 0,
layoutMode: 'packery'
});
});
它对我有用。