jQuery`Quicksand`插件无法正常工作，我该如何使用它？

Question

基本上......让这个工作...... JSFiddle!

我正在尝试使用jQuery插件过滤3 UL内的项目。 （每个<ul></ul>将包含无限量的列表项。）

我使用的插件位于以下链接（Quicksand）（以及文档和演示）。

流沙： http://razorjack.net/quicksand/

文档 http://razorjack.net/quicksand/docs-and-demos.html

该插件基本上会过滤我<ul></ul>中包含的项目的结果。

我曾多次尝试这种方法，但我没有收到任何控制台错误或任何指示我出错的地方，并且不知道为什么它不起作用。

我有3个<ul class="column"></ul>个标签，每个标签下面都有列表项（在本例中为3个）。我需要能够使用插件过滤（和动画）所有这些。

我还使用我的代码制作了 - JS Fiddle - 。 （Quicksand被列为'资源'）。

我的HTML的基本结构是：

菜单

<!-- On click of these, filter according to 'data-value' -->
<ul id="definations" class="wrapper">
    <li><a href="javascript:;">all</a></li>
    <li data-value="web"><a href="javascript:;">digital - web</a></li>
    <li data-value="iphone"><a href="javascript:;">digital - mobile</a></li>
    <li data-value="android"><a href="javascript:;">branding & print</a></li>
    <li><a href="javascript:;">event</a></li>
    <li><a href="javascript:;">motion</a></li>
</ul>

要过滤的内容

<div id="portfolio" class="wrapper">
    <ul class="column">
        <li class="work item" data-id="id-1" data-type="iphone" data-title="iPhone" data-project="iPhone and Android App" data-year="2012 Project">
            <a href="javascript:;"><img src="/css/img/product/work-demo1.png" alt="Omega"/></a>
            <a class="view" href="javascript:;"></a>
        </li>

        <li class="work item" data-id="id-2" data-type="android" data-title="Android" data-project="Rich Web Application" data-year="2012 Project">
            <a href="javascript:;"><img src="/css/img/product/work-demo3.png" alt="Description"/></a>
            <a class="view" href="javascript:;"></a>
        </li>

        <li class="work item" data-id="id-3" data-type="web" data-title="Web" data-project="Site Rebrand" data-year="2011 Project">
            <a href="javascript:;"><img src="/css/img/product/work-demo2.png" alt="Description"/></a>
            <a class="view" href="javascript:;"></a>
        </li>
    </ul>
    <!-- I have 3 of the above columns, I would like the filter to act on all of them -->
    <!-- I have only included 1 to keep it short -->
</div>

- 准备好了：JSFiddle!!

<小时/>

- 更新 -

我决定最后购买并使用Isotope插件。网站上的例子很棒，我可以达到我需要的效果 非常可定制，是我需要它的完美插件。 （如果你读这个，那可能就是你的事了） 请查看：http://isotope.metafizzy.co/

Answer 1

状态：以下是使用下面的现场演示所需的示例：jsFiddle

我强烈推荐这个tutorial with live demo，它显示了使用 Quicksand 插件的绝佳方法。以下评论包含了一些技巧，解释了如何在导航中添加可点击链接。

标记与您的标记非常相似，除了Quicksand JavaScript文件之外，还需要单独的资产文件来配置您的jsFiddle未使用的Quicksand。

可以肯定的是，此资产文件是 Click Event 处理程序，可根据您的标记布局激活Quicksand过滤。例如，此jsFiddle显示了Quicksand网站中已预先使用的{1}}中链接的示例中的1个。我引用的单独资产文件可以被视为JavaScript窗口中的jQuery标记。

另请注意 jQuery UI Library是必需的，并在上面的jsFiddle中作为资源加载。

我根据原始演示创建了一个带有Shadowbox的Quicksand Demo ，一个灯箱替代品。它在Examples Section上。如果您需要帮助，请访问并发布，我将很乐意为您提供帮助。

Answer 2

此错误/错误是'因为插件无法使用最新版本的jQuery。您可以使用旧的jQuery解决它（1.7.2我只是尝试并且它的工作原理）。

对不起我的英语......