同位素 - 在 jsFiddle 上工作，但不在现场

Question

我开始在一个偶然发现的 jsFiddle 上试验同位素 - 然后将确切的代码复制到文本/编辑中以制作一个非常基本的测试页面。 这是我的问题：jsFiddle 和我制作的测试页面不匹配。

• jsFiddle:http://jsfiddle.net/emilyryder/DEQZB/
• 我的测试站点：http://emilyryder.com/test/test.html

我想要的效果是砌体布局、三列和百分比宽度，因此它们会随着浏览器重新调整大小。

我的测试页面似乎只遵循 CSS 而不是 JavaScript。

我用过 JavaScript 但没用过 jQuery，我知道 Isotope 是一个 jQuery 插件。 （这里有没有我遗漏的步骤，或者我是否应该在我的网站上扔掉这段代码？）

还有一个“外部资源”，我现在认为它是我找到的原始 jsFiddle 的代码，但当时（大约一个小时前）我认为它是在我编写脚本时为我生成的，而且我是意味着附加它 - 它被保存为“jquery.isotope.min.js”的同名。 （之前从未使用过 jsFiddle 哈哈）但是，删除代码链接对站点没有影响。

在我的 test.html 页面中请求 JavaScript 和 CSS 的 jsFiddle 代码：

<link rel="stylesheet" href="teststyle.css">
<script type="text/javascript" src="jquery.isotope.min.js"></script>
<script type="text/javascript" src="js.js"></script>

Answer 1

您的脚本标签未正确关闭

<link rel="stylesheet" href="teststyle.css">
<script type="text/javascript" src="jquery.isotope.min.js"></script>
<script type="text/javascript" src="js.js"></script>

不关闭script 标记可能会阻止下一个script 正确包含在页面中

换句话说：这不是jsfiddle的问题。

Answer 2

你应该附加 jquery 文件和一个你缺少的回调函数

使用这个

<link rel="stylesheet" href="teststyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="jquery.isotope.min.js">
<script>
$(document).ready(function(){
var $container = $('#container');

$container.load(function () {
    $container.isotope({
        // options...
    });
});


$(function () {
    var $container = $('#container'),
        $items = $('.item');

    $container.isotope({
        itemSelector: '.item',
        masonry: {
            columnWidth: 0
        },
        resizesContainer: false,
        getSortData: {
            fitOrder: function ($item) {
                var order,
                index = $item.index();

                if ($item.hasClass('large') && index % 2) {
                    order = index + 1.5;
                } else {
                    order = index;
                }
                return order;
            }
        },
        sortBy: 'fitOrder'
    });

    $items.click(function () {
        var $this = $(this);
        // nothing to change if this already has large class
        if ($this.hasClass('large')) {
            return;
        }
        var $previousLargeItem = $items.filter('.large');

        $previousLargeItem.removeClass('large');
        $this.addClass('large');
        $container
        // update sort data on changed items
        .isotope('updateSortData', $this)
            .isotope('updateSortData', $previousLargeItem)
        // trigger layout and sort
        .isotope();
    });
});
});
</script>