JustifiedGallery
JustifiedGallery is the algorithm part needed to compute a grid of images a la flickr explore page.
Demo
You can check a plain vanilla javascript demo here
Instalation
In your project
npm install justifiedgallery --save
Since it's an npm module, use it with webpack or browserify
Usage
; let images = imgMeta1 imgMeta2;let grid = // mandatory, in px minHeight: 150 maxHeight: 350 // optional, in px borderWidth: 2 // mandatory, this function must return an object // having width and height properties { imagewidth = imageoriginalDimensionswidth; imageheight = imageoriginalDimensionsheight; return image; } // optional, determine which available version of the original image fits best { // resized images should either be an array of objects having width and height properties // or a hashmap: {[k: string] : {width: number, height: number}} // e.g. [{width: 220, height: 100}, {width: 640, height: 480}] // or {lowQ: {width: 220, height: 100}, medQ: {width: 640, height: 480}} let resizedImages = imageresizedImages; return resizedImages; } images; // get grid container width let containerWidth = documentclientHeight; // compute rows for the given container width // rows will be a list of GridRow instances let rows = grid; let row0 = rows0; let imagesToShowOnFirstRow = row0;
So the component should be used with any view framework -> e.g. jQuery, jsx, vanilla js and so on.