javascript - 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 - 用我的代码给你玩。 (流沙作为“资源”包含在内)。

我的 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 文件之外，还需要一个单独的 Assets 文件来配置 Quicksand，您的 jsFiddle 没有使用它。

可以肯定的是，此 Assets 文件是单击事件 处理程序，它根据您的标记布局激活流沙过滤。例如这个 jsFiddle显示 Quicksand 网站上的 5 个现成示例中的 1 个，链接在 Examples Section 中.我所指的单独 Assets 文件可以被视为 JavaScript 窗口中的 jQuery 标记。

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

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