2

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

我正在尝试使用 jQuery 插件来过滤 3 个 UL 中的项目。（每个<ul></ul>都有无限数量的列表项。）

我正在使用的插件位于下面的链接（流沙）（连同文档和演示）。

流沙： 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/

4

2 回答 2

3

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

我强烈推荐这个带有现场演示的教程，它展示了使用流沙插件的绝佳方法。下面显示的评论包括我解释如何在导航中具有可点击链接的一些提示。

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

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

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

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

于 2012-05-28T22:04:44.120 回答
0

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

请原谅我的英语...

于 2014-02-10T11:13:18.297 回答