skrylnikov / photo-flex-layout

Simple for use and beutiful layout for photo

Photo Flex Layout

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.

Install

npm add photo-flex-layout

Usage

import { photoFlexLayout } from 'photo-flex-layout';

const { containerHeight, boxes } = photoFlexLayout({
  targetRowHeight: 200,
  containerWidth: 500,
  boxSpacing: 0,
  items: [
    { width: 100, height: 200 },
    { width: 150, height: 100 },
    { width: 100, height: 100 },
    { width: 100, height: 100 },
    { width: 100, height: 100 },
    { width: 100, height: 100 },
  ],
});

containerHeight; //334

boxes; // [{width: 83.5, height: 167, top: 0, left: 0, ...}, {width: 250.5, height: 167, top: 10, left: 83.5, ...}, ...]

Thanks

Inspired by react-photo-gallery by Sandra Gonzales.