masonry-blade 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,24 +2,39 @@
|
|
|
2
2
|
|
|
3
3
|
Algo-oriented lib for creating masonry grids with ZERO dependencies😭, Web Worker-powered😱 calculations, and guaranteed column height differences no greater than 30%.
|
|
4
4
|
|
|
5
|
-
>
|
|
5
|
+
> Currently, only images are supported. This is essentially an **engine** for constructing _masonry-style_ matrices without any UI manipulation.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
<img width="300" src="./.github/logo.png" alt="masonry-blad logo">
|
|
9
|
-
<h3 align="center">masonry-blade</h3>
|
|
10
|
-
</div>
|
|
7
|
+
> Made with love. ❤️
|
|
11
8
|
|
|
12
9
|
|
|
13
10
|
|
|
14
11
|
|
|
12
|
+
[](https://github.com/steelWinds/masonry-blade/actions/workflows/build-validate.yml)
|
|
13
|
+
|
|
14
|
+
<div align="center">
|
|
15
|
+
<a href="https://steelwinds.github.io/masonry-blade/" target="_blank">
|
|
16
|
+
<img width="300" src="./.github/logo.png" alt="masonry-blad logo">
|
|
17
|
+
</a>
|
|
18
|
+
<h3 align="center">Click on logo and go to the playground</h3>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
## Playground
|
|
22
|
+
|
|
23
|
+
> You can see the already built matrix with Picsum API, lazy load, and responsive recreation recreateMatrix on the [Playground](https://steelwinds.github.io/masonry-blade/).
|
|
15
24
|
|
|
16
25
|
## Quick start
|
|
17
26
|
|
|
18
|
-
|
|
19
|
-
|
|
27
|
+
### Install
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
pnpm i masonry-blade
|
|
31
|
+
```
|
|
20
32
|
|
|
21
33
|
### Import
|
|
22
34
|
|
|
35
|
+
`MasonryMatrix` helps you build and rebuild a masonry layout incrementally.
|
|
36
|
+
It keeps the original input items internally, so you can append new items over time and fully recreate the matrix when the container width or column count changes.
|
|
37
|
+
|
|
23
38
|
```ts
|
|
24
39
|
import { MasonryMatrix } from 'masonry-blade';
|
|
25
40
|
```
|
|
@@ -302,9 +317,11 @@ const items: ImageItem[] = [
|
|
|
302
317
|
];
|
|
303
318
|
|
|
304
319
|
function getColumnCount(width: number): number {
|
|
320
|
+
if (width >= 1440) return 5;
|
|
305
321
|
if (width >= 1024) return 4;
|
|
306
|
-
|
|
307
|
-
return 2;
|
|
322
|
+
if (width >= 768) return 3;
|
|
323
|
+
if (width >= 480) return 2;
|
|
324
|
+
return 1;
|
|
308
325
|
}
|
|
309
326
|
|
|
310
327
|
function render(
|
|
@@ -397,10 +414,6 @@ For example, do not call `appendItems()` while a previous `recreateMatrix()` cal
|
|
|
397
414
|
|
|
398
415
|
## Development
|
|
399
416
|
|
|
400
|
-
### Environment variables
|
|
401
|
-
|
|
402
|
-
See the `docs/` directory for example `.env.*` files. **Environment variable files should be located in the project root directory.**
|
|
403
|
-
|
|
404
417
|
### Setup for Development
|
|
405
418
|
|
|
406
419
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "masonry-blade",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Algo-oriented lib for creating masonry grids with ZERO dependencies😭, Web Worker-powered😱 calculations, and guaranteed column height differences no greater than 30%.",
|
|
6
6
|
"keywords": [
|