Bootstrap 页面加载时的 MixItUp 随机过滤器答案

【问题标题】：MixItUp random filter on page load in BootstrapBootstrap 页面加载时的 MixItUp 随机过滤器
【发布时间】：2014-10-23 19:54:27
【问题描述】：

一直在修改 Bootstrap 中的 MixItUp。

我在 col 结构中将所有的类添加到列表中，但我无法让它在每次刷新页面时随机加载！我用过以下

$(function(){
    $('#Grid').mixitup({
        load: {
            sort: 'random'
        }
    });
});

我已经让它在 mixitup 代码笔上工作，但是一旦我将它分配到引导程序中的列中，它就不想玩球了！

有解决办法吗？

【问题讨论】：

或者.. 有没有像 mixitup 这样不错的插件可以推荐来支持这个功能..？
你能提供jsfiddle这个问题吗？
我已经把代码 sn-ps 放在这里了jsfiddle.net/9818ohak
我已经用所需的库和来自网络 (jsfiddle.net/9818ohak/6) 的一些图像更新了你的小提琴。像魅力一样工作......
谢谢 Max，它似乎在小提琴上工作，但我无法让它在我的网站上工作。它每次都以相同的顺序加载。我在$(function() { $('#Grid').mixitup({ load: { sort: 'random } }); }); 中有一个单独的 js 文件，其中包含以下内容，我正在将我的脚本加载到正文的底部<script src="js/bootstrap.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="js/jquery.mixitup.min.js"></script> <script src="js/safe.js"></script> 我做了一个新的小提琴jsfiddle.net/jc3t26wo

标签： jquery twitter-bootstrap twitter-bootstrap-3 jscript mixitup

【解决方案1】：

如果在 head 中引用了该单独文件，它将在引导程序或 jQuery 之前加载。此外，您应该在引导之前加载 jQuery。我的建议：将 bootstrap 和 jQuery 都放在标题中，然后在 document.ready() 中调用您的函数：

<head>
...
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mixitup/1.5.6/jquery.mixitup.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#Grid').mixItUp({
                load: {
                    sort: 'random'
                }
            });
        });
     </script>
</head>

更新

我可能发现了您的问题。您已链接到 MixItUp 插件的 1.5.6 版，而我复制到小提琴中的是 2.1.7 版。当我在任何小提琴中切换版本时，新版本可以工作，而旧版本不能。

【讨论】：

对不起，我离开了。如果我在头部使用脚本，它实际上仍然无法完全加载。它在通过 $(function() { $('#Grid').mixitup({ load: { sort: "random" } }); }); 调用时加载
我仍然无法弄清楚发生了什么。在小提琴jsfiddle.net/jc3t26wo 中，它似乎可以工作，但只会加载在一列中。
我添加了一行 CSS 来解决“单列”问题：jsfiddle.net/jc3t26wo/1。如果函数没有在头部执行，那么您要么有未解决的依赖关系，要么存在相互影响的脚本问题。您是否在浏览器的开发控制台中看到任何脚本错误？您可以发布<head></head> 部分的<script> 内容吗？
我已将我正在使用的内容上传到here
正如我所指出的，您使用的是 1.5.4 版本（甚至比您的小提琴还要旧）。您应该尝试使用 2.1.7 版本。
抱歉，如您指出的，上传了错误的版本。随着当前的 Mixitup js 上传，整个事情不再有效......