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;
}
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 "/in/set-369431" because I want links in "photostream context", not "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 + '] ');
      link.appendChild(image);
      fwall.appendChild(elem);
    });
    fwall.appendChild(document.createElement('li')); // End with an empty item. See flickrWallEndAdjust().
  }
}
function flickrWallEndAdjust() {
  let fwall = document.getElementById('fwall');
  if (fwall.offsetWidth === fwall.lastChild.offsetWidth || fwall.lastChild.offsetWidth < 75) {
	fwall.lastChild.style.display = 'none'; // if last (empty) item fills a full line - or only takes very little space on last line, remove/hide it.
  }
}
function jsonFlickrFeed(photos) { // Function 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);
  window.addEventListener('load', flickrWallEndAdjust, 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 by the javascript code -->
</ul>

Larger column width would have given more flexibility in number of photos per line, and by that sometimes better display of photos in portrait mode. 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...