同位素项目正在跳跃

Question

我正在使用 wordpress 和 isotope 创建一个投资组合网站。出于某种原因，每次对同位素项目进行排序时，它们都会在之后进行不和谐的跳跃。这是一个演示问题的 jsfiddle：

这是演示该问题的视频：

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

该问题仅在第一次对每个磁贴进行排序时出现。我怎样才能阻止这种情况发生？这些是我的同位素设置：

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

        }
    });

Answer 1

首先，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

Answer 2

我知道这不能回答您的问题，但是- 如果您删除原始 js fiddle 上的所有 css，您 posted 并更改同位素实例化以删除砌体，而是使用 fitRows，那么就没有跳跃。

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

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

很难看清发生了什么，因为有很多额外的 html 和 css 并且 javascript 的缩进不一致。如果你把它清理干净，post只有过滤必不可少的部分，我可以看得更清楚。

Answer 3

我已经通过简单地删除我添加到同位素项目的变换转换解决了我的问题。我还从该过渡中删除了“！重要”。我添加的过渡（悬停过渡）现在似乎可以很好地与同位素添加的过渡一起使用。

旧的无效代码：

.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/

同位素项目正在跳跃

Isotope Items are jumping

javascript

jquery

html

wordpress

jquery-isotope