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); }); });
Expand for more options Login