同位素项目正在跳跃

时间:2015-01-02 21:07:08

标签: javascript jquery html wordpress jquery-isotope

我正在使用wordpress和同位素创建一个投资组合网站。出于某种原因,每次对同位素项目进行分类时,它们都会在之后发生震动。这是一个证明问题的方法:

http://jsfiddle.net/tovly/8k6hyyzL/

以下是展示问题的视频:

https://drive.google.com/file/d/0B5OxMCWiLhrMcmZUYm56YkFzdGs/view?usp=sharing

问题仅在每个磁贴第一次排序时发生。 我怎么能阻止这种情况发生? 这些是我的同位素设置:

$container.isotope({ 
        itemSelector : '.item', 
        layoutMode : 'masonry',
        masonry: {
                isFitWidth: true,
             columnWidth: 60,
            gutter: 10

        }
    });

3 个答案:

答案 0 :(得分:3)

我通过简单地删除我添加到同位素项目的转换过渡来解决我的问题。我也删除了"!important"从那个过渡。我添加的转换(悬停转换)现在似乎与同位素添加的转换很好地协同工作。

旧的非工作代码:

.isotope-item {
    transition: transform 0.5s, opacity 0.5s, background-color 0.25s linear, 
    border-color 0.25s linear !important;
}

新工作代码:

.isotope-item {
    /*I removed "transform 0.5s" and "!important"*/
    transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear;
}

我创建了一个精简的jsfiddle来帮助我更轻松地解决问题。固定线是第10行。

https://jsfiddle.net/tovly/w0avjdx9/

答案 1 :(得分:0)

首先,这个问题与Wordpress无关。这是jQuery问题。你添加两次同位素代码。删除第一个附加。所以编辑你的文件:

jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts

    // (!) deleting start from here
    $container.isotope({ 
        itemSelector : '.item', 
        layoutMode : 'masonry',
        masonry: {
                isFitWidth: true,
             columnWidth: 60,
            gutter: 10

        }
    });
    // (!) deleting end of here

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    if("onhashchange" in window) {
    // ... continue

答案 2 :(得分:0)

我知道这不能回答你的问题,但是 - 如果你移除你发布的原始js小提琴上的所有css并改变同位素实例化以移除砌体,而不是使用fitRows,那么就没有跳跃。

$container.isotope({ 
    itemSelector : '.item', 
    layoutMode : 'fitRows'
});

这可能意味着您正在使用的CSS和砌体设置的组合不能很好地协同工作。

很难读懂正在发生的事情,因为有很多额外的html和css,并且javascript的缩进不一致。如果你清理它并只发布过滤所必需的部分,我可以更好看。