用于以随机顺序显示帖子的 Html 代码 | 用于以随机顺序显示帖子的

本文介绍了用于以随机顺序显示帖子的 Html 代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个 Tumblr 博客，展示了我感兴趣的照片.我希望我的 tumblr 照片帖子以随机顺序显示，这样每次加载页面时，我的网格主题中帖子的顺序都会随机显示.这样每个人都可以在不滚动的情况下看到我的所有帖子.

I have created a Tumblr blog that shows photos of my interest. I am looking to have my tumblr photo posts to be displayed in random order such that every-time the page is loaded, the order of posts in my grid theme is randomly shown. This way everyone can see all my posts without scrolling.

有谁知道我可以简单地插入到我的主题中的代码，以便帖子以随机顺序显示并在每次页面加载时以随机顺序显示.

Does anyone know a code that I can simply insert to my theme so that posts are shown in random order and be shown in random order every time the page loads.

推荐答案

我对 Tumbler 并不完全熟悉，但我敢打赌这些图像块有一个唯一的类名.您也可以在 Tumbler 上插入 JavaScript.请参阅:http://www.problogtricks.com/2013/12/add-custom-css-javascript-code-to-tumblr-blog.html

I am not entirely familiar with Tumbler, but I am willing to bet there is a unique class name for those image blocks. You can insert JavaScript on Tumbler as well. see: http://www.problogtricks.com/2013/12/add-custom-css-javascript-code-to-tumblr-blog.html

也就是说，使用 JavaScript 随机化元素非常简单.这是如何完成的演示.确定仅适用于这些元素的唯一类名后，您可以更改下面 JavaScript 函数内的参数.

That said, randomizing elements with JavaScript is super easy. Here is a demo of how that is done. After identifying a unique classname that applies only to those elements, you can change the parameter inside the JavaScript function below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .putauniqueclassnamehere{
        }
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
        $(document).ready(function (name) {
            return function () {
                var max = $(name).length;
                $.each($(name), function (p1, p2) {
                    var randPos = Math.floor(Math.random() * (max - 0 + 1) + 0);
                    $(p2).insertBefore($(name)[randPos]);
                })
                return ;
            }
        }(".putauniqueclassnamehere"))
    </script>
</head>
<body>
    <div class="mytest">Test 1</div>
    <div class="mytest">Test 2</div>
    <div class="mytest">Test 3</div>
    <div class="mytest">Test 4</div>
    <div class="mytest">Test 5</div>
</body>
</html>

这篇关于用于以随机顺序显示帖子的 Html 代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！