Html code for displaying posts in random order

问题

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.

回答1:

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

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>

回答2:

Just paste this at the end of your theme:

{block:IndexPage}
<script>
    $(document).ready(function (name) {
        return function () {
            var elts = $(name);
            var max = elts.length;
            $.each(elts, function (index, elt) {
                var randPos = Math.floor(Math.random() * (max - 0 + 1) + 0);
                $(elt).insertBefore(elts[randPos]);
            })
            return ;
        }
    }(".entry"))
</script>
{/block:IndexPage}

All the credit goes to Joshua Dannemann. I just pasted the relevant part of the code with the class to use with my theme: entry. It could be post or something else. Post a link to your tumblr and I can help you some more.

Edits:

renamed p1 and p2
added {block:IndexPage} and {/block:IndexPage} tags (without them, post pages are broken)

来源：https://stackoverflow.com/questions/29858430/html-code-for-displaying-posts-in-random-order

标签

tumblr