Make Pinterest Layout with eg.InfiniteGrid 3.4

Daybrush edited this page Sep 5, 2018 · 10 revisions

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.


What's New

Pinterest Layout(GridLayout with isConstantSize)

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);

Support Animation

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);

Support React Component

InfiniteGrid supports two versions of React components.

What's Next

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.

Series of “Layout Libraries for Images”

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.