Javascript 同位素转化3d值增加
请我需要帮助我使用同位素筛选我的项目,但项目组织得不好,因为内联样式translate3d值增加。。例如,第一个项目应该从值0px,0px,0px开始,但在我的例子中,它从40px,0px,0px开始 如果不包含javascript代码,我会看到4个项目像这样组织得很好 但当我在一行中包含JS代码i 3个项目时,并没有按应有的方式组织 请访问位于页脚上方页面底部的项目块以了解问题 JavascriptJavascript 同位素转化3d值增加,javascript,jquery,css,jquery-isotope,Javascript,Jquery,Css,Jquery Isotope,请我需要帮助我使用同位素筛选我的项目,但项目组织得不好,因为内联样式translate3d值增加。。例如,第一个项目应该从值0px,0px,0px开始,但在我的例子中,它从40px,0px,0px开始 如果不包含javascript代码,我会看到4个项目像这样组织得很好 但当我在一行中包含JS代码i 3个项目时,并没有按应有的方式组织 请访问位于页脚上方页面底部的项目块以了解问题 Javascript jQuery('document').ready(function () { va
jQuery('document').ready(function () {
var portfolio = jQuery('#portfolio');
var items = jQuery('.items', portfolio);
var filters = jQuery('.filters li a', portfolio);
items.imagesLoaded(function() {
items.isotope({
itemSelector : '.item',
layoutMode : 'fitRows',
transitionDuration : '0.7s'
});
});
});
CSS
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope-item {
/*I removed "transform 0.5s" and "!important"*/
transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
正如Fenici在评论中所说,解决方法是在
上删除内部填充,如下所示:
ul.items {
padding: 0;
}
目前,有一个
右填充:40px在itemSelector
的父项上的code>,由于JavaScript(以及随后的同位素)中使用了不同的盒子模型,因此在同位素元素定位计算过程中不使用该父项。您使用的是同位素的非常旧的版本v1.5.25(从2013年开始),但使用当前版本的js代码启动它(transitionDuration:
不是旧版本的一部分)。最新版本是v3.0.4,它没有使用.isotox
css。将isotox.js升级到当前版本并删除上面的css。我看到ul上有40px,左填充:0px?