Basic JSON data api pull for creating mockup user lists.

CSS

.user-box{
    margin:5px;
    display:inline-block;
}
.user-image{
    max-width:100px;
    max-height:100px;
    border-radius:100px;
    overflow:hidden;
    margin:5px;
}
.user-image img{
    width:100%;
}
.user-name{
    text-align:center;
    max-width:100%;
}

HTML - Container

<div id="users"></div>

Javascript

var Users = [];

getUser(6);

function parseUsers(){
    console.log(Users);
    for (x in Users){     
      var userImage = "<div class='user-image'><img src='"+Users[x].picture.medium+"'/></div>";
      var userName = "<div class='user-name'>"+Users[x].name.first.capitalizeFirstLetter()+" "+Users[x].name.last.capitalizeFirstLetter()+"</div>";
      $("#users").append("<div class='user-box'>"+userImage+userName+"</div>");
    }
}

function getUser(num){
    for (i=0;i<num;i++){
        console.log();
        $.ajax({
            url: 'http://api.randomuser.me/',
            dataType: 'json',
            async:true,
            success: function(data){
                var userData = data.results[0].user;
                Users.push(userData);
                Users.length == num ? parseUsers():null;
            }
        });
    }   
}

String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}