Cats Responsive Photo Grid
HTML
<section id="photos"></section>
CSS
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
@media (max-width: 1200px) {
#photos {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
body {
margin: 0;
padding: 0;
}
JAVASCRIPT
function getRandomSize(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
for (var i = 0; i < 50; i++) {
var width = getRandomSize(200, 400);
var height = getRandomSize(200, 400);
$('<img src="https://placekitten.com/'+width+'/'+height+'" alt="pretty kitty">').appendTo("#photos");
}
$('img').hide();
$('img').each( function(){
$(this).on('load', function () {
$(this).fadeIn(5000);
});
});
1 Response