1

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

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

我的测试页面似乎只遵循 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>
4

2 回答 2

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正确包含在页面中

换句话说：这不是问题。

于 2013-07-27T03:05:23.197 回答
0

你应该附上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>
于 2013-07-27T02:39:48.607 回答