同位素translate3d值增加

Question

我需要帮助，我用同位素过滤我的项目，但项目没有很好的组织，因为内联风格的translate3d值增加了。例如，第一个项目应该以值0px、0px、0px开始，但在我的示例中，它从40 0px、0px、0px开始。

在不包括javascript代码的情况下，我看到4个像这样组织良好的项目

​

但是，当我包含JS代码时，我会在一行中进行3个项目，而不是按应该组织的方式来组织。

​

请访问我的网站以了解位于页脚上方页面底部的项目块的问题。

Javascript

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;
}

Answer 1

您正在使用一个非常老的同位素版本，v1.5.25 (从2013年开始)，但是使用当前版本的js代码( transitionDuration:不是旧版本的一部分)。最新版本是v3.0.4，它不使用.isotope css。将isotope.js升级到当前版本，并删除上面的CSS。

Answer 2

正如Fenici在他的评论中所说，解决这一问题的方法是将内部填充放在您的<ul>上，如下所示：

ul.items {
    padding: 0;
}

目前，由于padding-right:40px;在itemSelector中不同的方盒模型的使用(以及随后的同位素)，在计算同位素元素定位时没有使用在JavaScript的母体上有一个JavaScript。