[Webdev] Dynamic image grid for web portfolio

Spudnik · Sep 2015

So I know this isn't the usual venue for this kind of question, but I thought I'd give it a shot.

I'm trying to make a responsive/dynamic image grid layout for my portfolio like Artstation has on their front page. Here's where I'm at:

http://jsfiddle.net/gprxzmtc/1/

So the functionality that I would want to have is this:

seamless rectangular tiles that keep aspect ratio
1x1 tiles (heightXwidth)
2x2 tiles
1x2 tiles (ideally)
2x1 tiles (ideally)
2x3 tiles (ideally)
number of columns changes to fit container width 100%
tiles scale uniformly to fit column width 100%
tiles reorder themselves to cover 100% of the image area.

What works:

adjust number of columns based on window size
adjust width of images to column width

What doesn't work (properly):

images tiling seamlessly in column
ordering the tiles to occupy the least amount of space

Right now my container max width is 960px which makes the 1x1 tile 160x160px, the 2x2 tile 320x320px etc.

HTML

<div class="container">
    <ul class="gallery">
        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeB' src='http://i.imgur.com/XuJoafB.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeC' src='http://i.imgur.com/FnVs97u.jpg' style='max-width:320px'></a></li>

        <li><a href=''><img id='sizeD' src='http://i.imgur.com/LUMUsh4.jpg' style='max-width:320px'></a></li>

    </ul>
</div>

CSS

a {
    text-decoration: none;
}

ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

body {
    background: #1c1c1c;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}


.container {
    background: #101010;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

.gallery {
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap:   0px;
    -moz-column-count:    3;
    -moz-column-gap:      0px;
    column-count:         3;
    column-gap:           0px;


    }
    .gallery li {
        margin:  0;
        padding:  0;
        display: inline-block;
    }
    .gallery img {
        height: auto;
        margin:  0;
        padding:  0;
        width:  100%; 
    }
    #sizeA {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeB {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeC {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeD {
        margin-bottom: 0;
        margin-right: 0;
    }
}

@media (max-width: 960px) {
    .gallery {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
    }
}

@media (max-width: 640px) {
    .gallery {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
    }
}

@media (max-width: 320px) {
    .gallery {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
    }
}