Code

Random CMS Sort on Page Load

Webflow's random sort feature doesn't always work. This method allows for truly random sorting of Webflow CMS items on page load.

Open the demo

Webflow's random sort feature doesn't always work. This method allows for truly random sorting of Webflow CMS items on page load.

How to add it

Add the Javascript code to the closing body tags of your custom code page settings
Signify your collection list class in the Javascript code, currently it's set to .collection-list

The code

Javascript

                      <!-- Add to closing body -->
<script>
$.fn.shuffle = function() {
  $.each(this.get(), function(index, el) {
    var $el = $(el);
    var $find = $el.children();
    var i = $find.length, k , temp;
    
     while(--i > 0) {
        k = Math.floor(Math.random() * (i+1));
        temp = $find[k];
        $find[k] = $find[i];
        $find[i] = temp;
     }

    $el.empty();
    $find.appendTo($el);
  });
};

$( document ).ready(function() {
    $(".collection-list").shuffle();
});
</script>