lista

<div class="lista-pessoas"></div>

<style>
    
</style>

<script>
    var listaDeFuncionarios = [
        {
            "imagem" : "https://lh3.googleusercontent.com/-hb7RdDL5Wtg/AAAAAAAAAAI/AAAAAAAAAAA/AMcAYi8btUz8lss7v8lbo-iIF6hgKsUMOw/s96-c-mo/photo.jpg",
            "nome" : "Manolo 1",
            "cargo" : "Developer",
            "minibio" : "blah, blah, blah ... blah :)",
        },
        {
            "imagem" : "https://lh3.googleusercontent.com/-hb7RdDL5Wtg/AAAAAAAAAAI/AAAAAAAAAAA/AMcAYi8btUz8lss7v8lbo-iIF6hgKsUMOw/s96-c-mo/photo.jpg",
            "nome" : "Manolo 2",
            "cargo" : "Developer",
            "minibio" : "blah, blah, blah ... blah :)",
        },
        {
            "imagem" : "https://lh3.googleusercontent.com/-hb7RdDL5Wtg/AAAAAAAAAAI/AAAAAAAAAAA/AMcAYi8btUz8lss7v8lbo-iIF6hgKsUMOw/s96-c-mo/photo.jpg",
            "nome" : "Manolo 3",
            "cargo" : "Developer",
            "minibio" : "blah, blah, blah ... blah :)",
        },
        {
            "imagem" : "https://lh3.googleusercontent.com/-hb7RdDL5Wtg/AAAAAAAAAAI/AAAAAAAAAAA/AMcAYi8btUz8lss7v8lbo-iIF6hgKsUMOw/s96-c-mo/photo.jpg",
            "nome" : "Manolo 4",
            "cargo" : "Developer",
            "minibio" : "blah, blah, blah ... blah :)",
        },
        {
            "imagem" : "https://lh3.googleusercontent.com/-hb7RdDL5Wtg/AAAAAAAAAAI/AAAAAAAAAAA/AMcAYi8btUz8lss7v8lbo-iIF6hgKsUMOw/s96-c-mo/photo.jpg",
            "nome" : "Manolo 5",
            "cargo" : "Developer",
            "minibio" : "blah, blah, blah ... blah :)",
        },
        {
            "imagem" : "https://lh3.googleusercontent.com/-hb7RdDL5Wtg/AAAAAAAAAAI/AAAAAAAAAAA/AMcAYi8btUz8lss7v8lbo-iIF6hgKsUMOw/s96-c-mo/photo.jpg",
            "nome" : "Manolo 6",
            "cargo" : "Developer",
            "minibio" : "blah, blah, blah ... blah :)",
        },
        {
            "imagem" : "https://lh3.googleusercontent.com/-hb7RdDL5Wtg/AAAAAAAAAAI/AAAAAAAAAAA/AMcAYi8btUz8lss7v8lbo-iIF6hgKsUMOw/s96-c-mo/photo.jpg",
            "nome" : "Manolo 7",
            "cargo" : "Developer",
            "minibio" : "blah, blah, blah ... blah :)",
        },
        {
            "imagem" : "https://lh3.googleusercontent.com/-hb7RdDL5Wtg/AAAAAAAAAAI/AAAAAAAAAAA/AMcAYi8btUz8lss7v8lbo-iIF6hgKsUMOw/s96-c-mo/photo.jpg",
            "nome" : "Manolo 8",
            "cargo" : "Developer",
            "minibio" : "blah, blah, blah ... blah :)",
        }
    ];

    Array.prototype.shuffle = function() {
        var input = this;
        for (var i = input.length-1; i >=0; i--) {
        
            var randomIndex = Math.floor(Math.random()*(i+1)); 
            var itemAtIndex = input[randomIndex]; 

            input[randomIndex] = input[i]; 
            input[i] = itemAtIndex;
        }
        return input;
    }

    function ListaPessoas (seletor, data) {
        this.seletor = seletor;
        this.data = data;
    }

    ListaPessoas.prototype.renderBoxPessoa = function (pessoa) {
        return '<div class="box-pessoa">' +
        ' <img src="' + pessoa.imagem + '">' +
        ' <span class="nome">' + pessoa.nome + '</span>' +
        ' <span class="cargo">' + pessoa.cargo + '</span>' +
        ' <p>' + pessoa.minibio + '</p>' +
        ' </div>';
    }

    ListaPessoas.prototype.render = function () {
        var lista = this.data.shuffle();
        var html  = '';

        for (var key = lista.length-1;key >=0;key--) {
            html += this.renderBoxPessoa(lista[key]);
        }

        document.querySelector(this.seletor).innerHTML = html;
    }

    var lista = new ListaPessoas ('.lista-pessoas', listaDeFuncionarios);

    lista.render();

</script>