Question

我开始尝试在我偶然发现的jsFiddle上使用Isotope - 然后将确切的代码复制到text / edit中以制作一个非常基本的测试页面。 这是我的问题：我制作的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页面中的jsFiddle代码请求JavaScript和CSS：

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

同位素 - 适用于jsFiddle，但不适用于现场

2 个答案: