Make Pinterest Layout with eg.InfiniteGrid 3.4
InfiniteGrid is A module used to arrange card elements including content infinitely according to layout type. With this module, you can implement various layouts composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance.
GridLayout is a layout that aligns items that have the same width. A typical example is Pinterest's Card UI.
The newly added isConstantSize option can maintain the size of the item, regardless of the screen size changes.
You can use DOM Recycle to create a performance-enhanced Pinterest layout by specifying the isConstantSize option to true with GridLayout.
The isConstantSize option can be used if the size of the item does not change even if you use a layout other than GridLayout.
const ig = new eg.InfiniteGrid(".viewer", {
isConstantSize: true,
});
ig.setLayout(eg.InfiniteGrid.GridLayout);
ig.layout(true);The transitionDuration option animates the position and size of the item when you change the size of the screen.
const ig = new eg.InfiniteGrid(".viewer", {
transitionDuration: 0.2,
});
ig.setLayout(eg.InfiniteGrid.GridLayout);
ig.layout(true);InfiniteGrid supports two versions of React components.
- react-infinitegrid: React Component for InfiniteGrid
- react-layout: React Component that provides 5 layouts of InfiniteGrid
We are working on the following tasks in order to provide always-on convenience.
- Support percentage of size and position.
- Support Template, such as React Component Item.
- Support various size of FrameLayout
Please look forward to the next release to come back with a better look.