Element to layout images making best use of available space.

[ This description is mirrored from README.md at github.com/Scarygami/scary-gallery on 2019-05-10 ]

<scary-gallery>

Published on webcomponents.org

<scary-gallery> will (try to) layout any of its <scary-image> children to make best use of available space, and rearranges the images, when the size changes.

Sample usage:

<scary-gallery min-height="100">
  <scary-image src="https://lorempixel.com/300/200/"></scary-image>
  <scary-image src="https://lorempixel.com/350/250/"></scary-image>
  <scary-image src="https://lorempixel.com/350/200/"></scary-image>
  <scary-image src="https://lorempixel.com/800/200/"></scary-image>
  <scary-image src="https://lorempixel.com/320/200/"></scary-image>
  <scary-image src="https://lorempixel.com/200/200/"></scary-image>
</scary-gallery>

Disclaimer:

Work in progress, the algorithm to layout the images is far from perfect.

Install

Link to this version
TestedReleased 16 May 2017Other
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.0.1)
Browser Compatibility
Install with
Release notes - Version 2.0.0

Dependencies

Polymer/polymer#1.9 - 2