photo-flex-layout

Simple for use and beutiful layout for photo

Usage no npm install needed!

<script type="module">
  import photoFlexLayout from 'https://cdn.skypack.dev/photo-flex-layout';
</script>

README

Photo Flex Layout

Github license Npm version Npm types Bundlephobia size

Simple for use and beutiful layout for photo.

  • Small 2 kbytes (minified and gzipped). Size Limit controls the size.
  • Beutiful This is implementation Google Photo Flex Layout
  • Framework agnostic
  • It has good TypeScript support.
import { photoFlexLayout } from 'photo-flex-layout';

const { containerHeight, boxes } = photoFlexLayout([0.5, 1.5, 1, 1, 1, 1, 1]);

containerHeight; //183

boxes; // [{width: 77, height: 163, top: 10, left: 10, ...}, {width: 230, height: 163, top: 10, left: 97, ...}, ...]

Install

npm install --save photo-flex-layout

Usage

Without config:

photoFlexLayout([0.5, 1.5, 1]);

With width and height:

photoFlexLayout([
  { width: 100, height: 200 },
  { width: 200, height: 200 },
]);

Without paddings

photoFlexLayout([...], { boxSpacing: 0, containerPadding: 0 });

With custom paddings

photoFlexLayout([...], {
  boxSpacing: { horizontal: 10, vertical: 5 },
  containerPadding: { top: 20, bottom: 0, left: 0, right: 0 },
});

With custom width and target height

photoFlexLayout([...], { targetRowHeight: 200, containerWidth: 500 });

Thanks

Inspired by react-photo-gallery by Sandra Gonzales.