How to Implement a Flickr-Like Justified Gallery in Pure CSS

Can CSS scale a set of images to fit together (like Google Photos)?

The comments to this question have confirmed what I suspected, that it can't be achieved by CSS alone.

@BugsArePeopleToo has given a good reference for a JavaScript library that does what I want, and more: https://masonry.desandro.com/v3/ and https://isotope.metafizzy.co/layout-modes/masonry.html

I like to keep it simple and prefer to roll my own, but I didn't want to write the JS myself if some CSS feature that I didn't know about would do it. It doesn't, so I did end up rolling my own.

In case anyone wants to do the same, here's my first draft. It works well, but I haven't yet decided how best to handle when the last row doesn't get filled.

<!DOCTYPE html> <html> <head>
    <title>Tile Test</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        *   { box-sizing: border-box; }
        div { border-width: 0; padding: 0; margin: 0; width: 100%; }
        img { border-width: 0; padding: 0; margin: auto; height: 99%; }
    </style>
</head>
<body>
    <h1>Tile Test</h1>
    <div id="tileMe">
        <img alt="Sample Image" src=".Images/B0240.jpg" />
        <img alt="Sample Image" src=".Images/B0250.jpg" />
        <img alt="Sample Image" src=".Images/B0260.jpg" />
        <img alt="Sample Image" src=".Images/B0270.jpg" />
        <img alt="Sample Image" src=".Images/B0280.jpg" />
        <img alt="Sample Image" src=".Images/B0290.jpg" />
        <img alt="Sample Image" src=".Images/B0300.jpg" />
        <img alt="Sample Image" src=".Images/B0310.jpg" />
        <img alt="Sample Image" src=".Images/B0320.jpg" />
        <img alt="Sample Image" src=".Images/B0330.jpg" />
        <img alt="Sample Image" src=".Images/B0340.jpg" />
    </div>
</body>
<script> "use strict"
    window.onload = window.onresize = function() {
        resize("tileMe", 14)
    }
    var pixelsPerEm = function(element) {
        var width
        var div = document.createElement('div')
        div.style.width = "1000em"
        element.appendChild(div)
        width = div.offsetWidth
        element.removeChild(div)
        return width / 1000
    }
    var findAspectRatio = function(images, count) {
        var i
        var aspect = 0
        for (i=0; i<count; ++i)
            aspect += images[i].naturalWidth / images[i].naturalHeight
        return aspect
    }
    var makeDiv = function(container, aspect, images, count) {
        var i
        var div = document.createElement("div")
        div.style.height = (container.clientWidth / aspect) + "px"
        div.style.display = "flex"
        for (i=0; i<count; ++i)
            div.appendChild(images.shift())
        container.appendChild(div)
    }
    var resize = function(id, maxEms) {
        var aspect, count, i
        var container = document.getElementById(id)
        var maxHeight = pixelsPerEm(container) * maxEms
        var images = Array.from(container.getElementsByTagName("img"))
        while (container.lastChild) container.removeChild(container.lastChild)
        while (images.length) {
            for (i=1; i<=images.length; ++i) {
                count = i
                aspect = findAspectRatio(images, i)
                if (container.clientWidth / aspect < maxHeight)
                    break
                aspect = container.clientWidth / maxHeight
            }
            makeDiv(container, aspect, images, count)
        }
    }
</script>

How does Google use HTML tags to enhance the search engine?

I think it's called "Semantic Markup"

[...] semantic markup is markup that is descriptive enough to allow us and the machines we program to recognize it and make decisions about it. In other words, markup means something when we can identify it and do useful things with it. In this way, semantic markup becomes more than merely descriptive. It becomes a brilliant mechanism that allows both humans and machines to “understand” the same information. http://www.digital-web.com/articles/writing_semantic_markup/

A more practical article here
http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/

How to Implement a Flickr-Like Justified Gallery in Pure CSS

Can CSS scale a set of images to fit together (like Google Photos)?

How does Google use HTML tags to enhance the search engine?

Related Topics

Leave a reply