README
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.
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.