tiny-design/packages/react/src/waterfall/demo/Image.tsx at edcf5630bbb0be11e1227c72b9bdbefa66346412 · wangdicoder/tiny-design · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import { Waterfall } from '@tiny-design/react';
import { WaterfallItem } from '../types';

// Lorem Picsum — free placeholder images with varying aspect ratios
const imageList = [
  'https://picsum.photos/id/10/400/300',
  'https://picsum.photos/id/22/400/500',
  'https://picsum.photos/id/37/400/250',
  'https://picsum.photos/id/42/400/400',
  'https://picsum.photos/id/58/400/350',
  'https://picsum.photos/id/65/400/450',
  'https://picsum.photos/id/76/400/280',
  'https://picsum.photos/id/84/400/520',
  'https://picsum.photos/id/96/400/320',
  'https://picsum.photos/id/119/400/380',
  'https://picsum.photos/id/137/400/260',
  'https://picsum.photos/id/152/400/470',
  'https://picsum.photos/id/167/400/310',
  'https://picsum.photos/id/180/400/420',
  'https://picsum.photos/id/193/400/290',
  'https://picsum.photos/id/206/400/360',
];

const items: WaterfallItem<string>[] = imageList.map((img, index) => ({
  key: `img-${index}`,
  data: img,
}));

export default function ImageDemo() {
  return (
    <Waterfall
      columns={4}
      gutter={16}
      items={items}
      itemRender={({ data }) => (
        <img
          src={data}
          alt="sample"
          style={{ width: '100%', display: 'block', borderRadius: 4 }}
        />
      )}
    />
  );
}