同位素translate3d值增加

时间:2017-07-18 14:22:30

标签: javascript jquery css jquery-isotope isotope

我需要帮助我使用同位素来过滤我的项目,但项目组织不好,因为内联样式translate3d值增加..例如,第一个项目应该从值0px,0px,0px开始,但在我的情况下,它开始于40px,0px,0px

如果不包含javascript代码,我会看到4个项目组织得像这样 enter image description here

但是,当我在一行中包含JS代码i 3项目时,并没有按照应有的方式进行组织 enter image description here

请访问my website以了解项目阻止位于页脚上方页面底部的问题

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

2 个答案:

答案 0 :(得分:1)

您使用的是同位素的非常旧版本,v1.5.25(自2013年起),但使用当前版本的js代码启动它(transitionDuration:不是旧版本的一部分)。最新版本是v3.0.4,它不使用.isotope css。将isotope.js升级到当前版本并删除上面的CSS。

答案 1 :(得分:0)

就像Fenici在他的评论中所说的那样,解决方案是将class MyStreamListener(tweepy.StreamListener): def __init__(self, file): self.file = file super().__init__() def on_status(self, status): text = status.text name = status.user.screen_name uid = status.user.id print (text) print (uid, text, name, self.file) def on_error(self, status_code): if status_code == 420: return False myStreamListener = MyStreamListener(file=open("results.txt", "w")) 上的内部填充放在这样的位置:

<ul>

目前,在ul.items { padding: 0; } 的父级上有一个padding-right:40px;,由于JavaScript中不同的盒子模型使用,在计算同位素元素定位时未使用itemSelector同位素)。