<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<div class="row">
<h2>jQuery with json displaying in a list with Bootstrap 3</h2>
<div class="row" id="example"></div>
</div>
</div>
.crop-image {
width: 100%;
height: 300px; /* istediğin yükseklik */
object-fit: cover;
object-position: top; /* üstten kırpmaya başla */
display: block;
}
$(document).ready(function() {
// json list
var data = {
"example": [{
"imageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s518/ivanovic.jpg",
"name": "Dr. Anna kornikova",
"email": "yeterbukadar@hotmail.com"
}, {
"imageUrl": "https://observation.org/media/photo/46744451.jpg",
"name": "Yusuf Dizdar",
"email": "Lavonne.Kiehn@hotmail.com"
},{
"imageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg",
"name": "bülent ersoy",
"email": "yancebimekoy@hotmail.com"
},{
"imageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcRlWMXJAYstGEw6LQAJ6WdK2xdXs5veW4tLxETzua0tqpxODsqZXExvIXl3gVQMnAb2sVL84_WBM9mGv_u6WYyUtt4B7N82iiy6KceAwel9y4mYxq2Dw9Fi0XnatN16HEPVXOaTPn7Z2ISVQNdFmiaeM3fZNK8QZKXEEn9XOmSCmv1SB3OHDZFTX6vmK/s518/squid.jpg.jpg",
"name": "Şaziye Ağlamaz",
"email": "kellepaça@hotmail.com"
},{
"imageUrl": "https://observation.org/media/photo/46744451.jpg",
"name": "Sabah 4 oldu",
"email": "burgerking@hotmail.com"
}, {
"imageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_5UOnwG08ciFaMVPVebxAEmLQvwwqkHF-Ks7EYqe5yeIfiLM5tjL2by_TPztgRxb_u09PSxUeJfwp2ESTK7h1LeWD9FJt_3_fwKIpZloU341Vjp6FiI49-82eKeizkeGnz4e6B-ZgYnS7SxKXF60nqFeh7o71DNYrVpRXHFM3pfvoknxyn7zgvYRhLC/s518/lizard.jpg",
"name": "Karnım acıktı",
"email": "pizzaburda@yahoo.com"
}]
};
// listing
var output = "";
$.each(data.example, function(key, value) {
output += '<div class="col-sm-6 col-md-4"><div class="thumbnail"><img class="crop-image" src="'+ value.imageUrl +'" width="100%" alt="AngularJS"><div class="caption"><h3>' + value.name + '</h3><p>' + value.email + '</p><p><a href="#" class="btn btn-primary">E-book</a> <a href="#" class="btn btn-default">Print + Ebook</a></p></div></div></div>';
});
$('#example').append(output);
});
