A demonstration of flexImages on FurryNetwork

FN_Flex-Images.js

// JavaScript flexImages v1.0.2
// https://github.com/Pixabay/JavaScript-flexImages
var flexImages=function(){function e(e){function t(e,r,n,i){function o(e){n.maxRows&&g>n.maxRows||n.truncate&&e&&g>1?c[a][0].style.display="none":(c[a][4]&&(c[a][3].setAttribute("src",c[a][4]),c[a][4]=""),c[a][0].style.width=l+"px",c[a][0].style.height=h+"px",c[a][0].style.display="block")}for(var a,l,s,d,f=1,g=1,u=e.clientWidth-2,c=[],m=0,h=n.rowHeight,w=0;w<r.length;w++)if(c.push(r[w]),m+=r[w][2]+n.margin,m>=u){var p=c.length*n.margin;for(f=(u-p)/(m-p),h=Math.ceil(n.rowHeight*f),s=0,l,a=0;a<c.length;a++)l=Math.ceil(c[a][2]*f),s+=l+n.margin,s>u&&(l-=s-u),o();c=[],m=0,g++}for(a=0;a<c.length;a++)l=Math.floor(c[a][2]*f),d=Math.floor(n.rowHeight*f),o(!0);i||u==e.clientWidth||t(e,r,n,!0)}if(document.querySelector){var r={selector:0,container:".item",object:"img",rowHeight:180,maxRows:0,truncate:0};for(var n in e)e.hasOwnProperty(n)&&(r[n]=e[n]);for(var i="object"==typeof r.selector?[r.selector]:document.querySelectorAll(r.selector),o=0;o<i.length;o++){var a=i[o],l=a.querySelectorAll(r.container),s=[],d=(new Date).getTime();if(l.length){var f=window.getComputedStyle?getComputedStyle(l[0],null):l[0].currentStyle;r.margin=(parseInt(f.marginLeft)||0)+(parseInt(f.marginRight)||0)+(Math.round(parseFloat(f.borderLeftWidth))||0)+(Math.round(parseFloat(f.borderRightWidth))||0);for(var g=0;g<l.length;g++){var u=l[g],c=parseInt(u.getAttribute("data-w")),m=c*(r.rowHeight/parseInt(u.getAttribute("data-h"))),h=u.querySelector(r.object);s.push([u,c,m,h,h.getAttribute("data-src")])}t(a,s,r);var w=function(){t(a,s,r)};document.addEventListener?(window["flexImages_listener"+d]=w,window.removeEventListener("resize",window["flexImages_listener"+a.getAttribute("data-flex-t")]),delete window["flexImages_listener"+a.getAttribute("data-flex-t")],window.addEventListener("resize",window["flexImages_listener"+d])):a.onresize=w,a.setAttribute("data-flex-t",d)}}}}return e}();!function(){"function"==typeof define&&define.amd?define("flexImages",function(){return flexImages}):"undefined"!=typeof module&&module.exports?module.exports=flexImages:window.flexImages=flexImages}();

function injectCSS() {
	var style = [
		".media-grid--fullscreen .media-grid__item {",
		"	flex: unset !important;",
		"}",
		//FLEX-IMAGES CSS
		".flex-images { overflow: hidden; }",
		".flex-images .item { float: left; margin: 4px; box-sizing: content-box; overflow: hidden; position: relative;  }",
		".flex-images .item img { display: block; width: auto; height: 100%; }"
	];
	var styleEl = document.createElement("style");
	styleEl.innerHTML = style.join("");
	document.head.appendChild(styleEl);
}

function applyFlex(submissionList) {
	var imagesReady = 0;
	for(i=0; i < submissionList.length; i++) {
		let submission = submissionList[i];
		let thumb = submission.getElementsByClassName("thumbnail__img")[0];
		thumb.src = thumb.src.replace("315x315", "500x300");

		let width = thumb.naturalWidth;
		let height = thumb.naturalHeight;
		let wait = setInterval(function() { //trying to get image dimensions while image is loading
			if (width != 315 && height != 315) {
				submission.setAttribute("data-w", width);
				submission.setAttribute("data-h", height);
				submission.classList.add("item");
				imagesReady = imagesReady + 1;
				if (imagesReady >= submissionList.length) {
					new flexImages({ selector: '.flex-images', rowHeight: 300 });
				}
				clearInterval(wait);
			} else {
				width = thumb.naturalWidth;
				height = thumb.naturalHeight;
			}
		}, 0);
	}
}

function initialize() {
	var gallery = document.getElementsByClassName("media-grid")[0];
	gallery.classList.add("flex-images");
	injectCSS();
	applyFlex(gallery.getElementsByClassName("media-grid__item"));
}

initialize();