jQuery `Quicksand` 插件不起作用，我该如何使用它？答案

【问题标题】：jQuery `Quicksand` plugin not working, how do I use it?jQuery `Quicksand` 插件不起作用，我该如何使用它？
【发布时间】：2012-06-03 02:19:15
【问题描述】：

基本上......让这个工作...... 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 - 我的代码供您使用。（流沙作为“资源”包含在内）。

我的 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/

【问题讨论】：

试图提供帮助，但在控制台中立即收到此错误：$("#definations").quicksand is not a function
在我的回答中查看 STATUS jsFiddle。这是你需要的吗？

标签： javascript jquery quicksand jquery-isotope

【解决方案1】：

状态：以下是您想要使用以下现场演示的示例：jsFiddle

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

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

可以肯定的是，这个资产文件是 Click Event 处理程序，它根据您的标记布局激活流沙过滤。例如，jsFiddle 显示了来自流沙网站的 5 个准备使用示例中的 1 个，这些示例在 Examples Section 中链接。我提到的单独的资产文件可以被认为是 JavaScript 窗口中的 jQuery 标记。

另请注意，jQuery UI 库是必需的，并在上述 jsFiddle 中作为资产加载。

我在原始演示的基础上创建了一个 Quicksand Demo with Shadowbox，这是一个灯箱替代品。它在Shadowbox Forum 上。如果您需要这方面的帮助，请访问并在那里发帖，我很乐意提供帮助。

【讨论】：

【解决方案2】：

此错误/错误是因为该插件不适用于最新版本的 jQuery。您可以只使用旧的 jQuery 来解决它（我刚刚尝试过 1.7.2 并且它可以工作）。

请原谅我的英语......

【讨论】：