I recently stumbled upon a little demo showing how simple it is to construct an "adaptive layout image wall" using CSS Flexbox. And I thought it would be fun to combine the techniques with a feed from my own Flickr gallery...

Unlike the demo on CSS-tricks, which dynamically adapts itself to screen/browser dimensions or column width, my blog has the advantage (and disadvantage) to be fixed width. So I have further simplified the CSS-code in my "Flickr Wall" below, which displays latest additions to my "FlickrBadge album" on Flickr.

Feeds from Flickr is generally not only available in the usual RSS and Atom formats, but among other formats also available in JSON and JSONP format. For the pure-frontend implementation here, JSONP was the natural choice to avoid cross-origin errors. Complete source-code (CSS, Javascript and HTML) for my implementation follows below the wall...

CSS:

<style>
ul#fwall {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style-type: none;
  width: 690px;
}
ul#fwall li {
  height: 195px;
  flex-grow: 1;
  margin: 0; /* To reset value set in my global stylesheet */
}
ul#fwall li:last-child {
  flex-grow: 10;
}
ul#fwall img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
</style>

Javascript:

<script>
let fwitems = null;
function flickrWall() {
  if (fwitems) {
    let fwall = document.getElementById('fwall');
    fwitems.forEach(function(item) {
      let elem = document.createElement('li');
      let link = document.createElement('a');
      link.setAttribute('href', item.link.replace('/in/set-369431','')); // Remove the "/in/set-369431" because I want links to be in "photostream context", not in "album context".
      link.setAttribute('title', item.title);
      elem.appendChild(link);
      let image = document.createElement('img');
      image.setAttribute('src', item.media.m.replace('_m.','.')); // Default photos in feed are 240px wide XXXX_m.jpg photos, but I want the 500px wide XXXX.jpg photos.
      image.setAttribute('alt', ' [Image: ' + item.title + '] ');
      image.setAttribute('loading', 'lazy');
      link.appendChild(image);
      fwall.appendChild(elem);
    });
    fwall.appendChild(document.createElement('li')); // End with an empty item.
  }
}
function jsonFlickrFeed(photos) { // Function to be called from JSONP feed (https://www.flickr.com/services/feeds/photoset.gne?nsid=10259776@N00&set=369431&lang=en-us&format=json&nojsoncallback=0)
  fwitems = photos.items;
  window.addEventListener('DOMContentLoaded', flickrWall, false);
}
</script>
<script defer src="https://www.flickr.com/services/feeds/photoset.gne?nsid=10259776@N00&set=369431&lang=en-us&format=json&nojsoncallback=0"></script>

HTML:

<ul id="fwall">
  <!-- Photos will be inserted here -->
</ul>

Larger column width would have given more flexibility in number of photos per line, and by that sometimes better display of photos (less aggresive cropping or scaling). But for the few lines of code, it is a pretty good result already?...

PS: I have noticed that some very aggressive privacy blockers (read: Ghostery) might block reading the JSONP feed. If that happens, there's no delicious photos to be seen...

Update: I have made different wall implementation with adaptive width showing new additions to a Flickr group, on my otherwise pretty dead Planet 7D site.