同位素项目正在跳跃答案

【问题标题】：Isotope Items are jumping同位素项目正在跳跃
【发布时间】：2015-02-14 03:29:08
【问题描述】：

我正在使用 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

        }
    });

【问题讨论】：

jsfiddle 比视频更有用。
感谢您的建议。我添加了一个 jsfiddle 来进一步说明问题。

标签： javascript jquery html wordpress jquery-isotope

【解决方案1】：

我通过简单地删除我添加到同位素项目的变换转换解决了我的问题。我还从该过渡中删除了“！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/

【讨论】：

【解决方案2】：

首先，这个问题对 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

【讨论】：

当我按照您的建议进行操作时，不和谐的跳跃仍然只是在不同的方向上。当我删除该代码时，它还引入了其他问题，例如删除同位素项目之间的间距。我对我复制的代码中的其他地方感到困惑。据我了解，您建议我删除的代码只是将设置应用于同位素，我没有看到我在其他任何地方复制了该代码。这是一个实施了您的建议的 jsfiddle，因此您可以看到问题jsfiddle.net/tovly/dq2n42La/2

【解决方案3】：

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

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

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

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

【讨论】：

感谢有关创建清理版本的建议。我这样做了，它帮助我解决了我的问题。我发布了一个对我有用的答案。