A JavaScript library for implementing infinite grid layouts with various card arrangements and guaranteed DOM performance.
@egjs/infinitegrid is a JavaScript library for creating infinitely scrolling grid layouts with cards of varying sizes. It solves the problem of building performant, dynamic grids that can handle large datasets without degrading user experience. The library provides multiple layout algorithms like Masonry and Justified grids while maintaining optimal DOM management.
Frontend developers building content-heavy applications like image galleries, product listings, dashboards, or social media feeds that require infinite scrolling and responsive grid layouts.
Developers choose InfiniteGrid for its framework-agnostic support, performance guarantees through DOM optimization, and flexible layout options that work seamlessly across desktop and mobile environments.
A module used to arrange card elements including content infinitely on a grid layout.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Works seamlessly with React, Vue, Angular, Svelte, and vanilla JavaScript, as shown by the dedicated packages and badges listed in the README, ensuring broad compatibility.
Offers Masonry, Justified, Frame, and Packing grid types, providing flexibility for different design needs, demonstrated in documentation and demos.
Maintains a limited number of DOM elements and uses ResizeObserver for efficient rendering, guaranteeing smooth scrolling even with large datasets, as highlighted in the philosophy.
Supports items with varying sizes through options like isEqualSize and data-grid-size-group attributes, allowing for complex grid arrangements without performance hits, as explained in the 'Pre-guess size' section.
Requires developers to handle item appending and data fetching manually via events like 'requestAppend', which adds complexity compared to more integrated, declarative solutions.
Relies on custom data attributes (e.g., data-grid-lazy, data-grid-size-group) for advanced features, which might not align well with some frameworks' reactive data patterns and can be error-prone.
Focuses solely on layout logic, leaving all styling to the developer, increasing initial setup time for teams wanting pre-designed, drop-in components.