BestHub
Sign in
Tagged articles
8 articles
Page 1 of 1
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 9, 2024 · Frontend Development

Implementing a Waterfall Layout with Virtual List in Vue3 and TypeScript

This article provides a step‑by‑step guide on building a responsive waterfall (masonry) layout combined with a virtual list in Vue 3 using TypeScript, covering data preparation, container sizing, position calculation, infinite scroll loading, handling variable card heights, and responsive column adjustments.

Responsive DesignTypeScriptVue3
0 likes · 24 min read
Implementing a Waterfall Layout with Virtual List in Vue3 and TypeScript
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 11, 2024 · Frontend Development

Implementing a Virtual Waterfall List in Vue 3 + TypeScript with Dynamic Height Support

This article provides a step‑by‑step tutorial on building a virtual waterfall (masonry) list component in Vue 3 using TypeScript, covering component structure, props, state management, rendering logic, handling variable item heights via temporary DOM measurement, performance optimizations, and practical usage examples.

Vuefrontendperformance
0 likes · 36 min read
Implementing a Virtual Waterfall List in Vue 3 + TypeScript with Dynamic Height Support
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 15, 2023 · Frontend Development

Responsive Waterfall Flow Layout Implementation in React

This article explains how to build a responsive waterfall (masonry) layout in React, covering the underlying principle of absolute positioning, dynamic column calculation, item placement based on column heights, lazy image loading, and provides the complete TypeScript component and CSS code.

CSSJavaScriptResponsive Design
0 likes · 13 min read
Responsive Waterfall Flow Layout Implementation in React
Alipay Experience Technology
Alipay Experience Technology
Feb 10, 2023 · Frontend Development

How to Perfect a Waterfall Layout: A Frontend Engineer’s Algorithmic Journey

This article walks through the challenges of creating a tidy waterfall‑style image gallery, explains why the classic greedy algorithm fails with long images, and details a custom NP‑hard‑aware solution that uses average‑based grouping, sorting, and order‑preserving tweaks to achieve a more balanced visual layout.

NP-harddynamic programmingfrontend algorithm
0 likes · 13 min read
How to Perfect a Waterfall Layout: A Frontend Engineer’s Algorithmic Journey
Tencent TDS Service
Tencent TDS Service
Feb 1, 2018 · Backend Development

How a TV App’s Waterfall Layout Boosted User Engagement and Efficiency

This article details the redesign of a TV app from a horizontal layout to a waterfall flow, explaining the project timeline, advantages, new seven‑layer architecture, CMS‑driven configuration, compatibility handling, pagination strategies, caching, and fault‑tolerance measures that together improved user conversion and system robustness.

Backend ArchitectureCMSTV app
0 likes · 36 min read
How a TV App’s Waterfall Layout Boosted User Engagement and Efficiency
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Apr 11, 2017 · Frontend Development

Mastering Waterfall Layouts: JS, jQuery, and CSS Implementations

This tutorial walks through three practical approaches—pure JavaScript, jQuery, and pure CSS—to create a responsive waterfall (masonry) layout, covering the required HTML structure, script inclusion, dynamic loading logic, and the ultra‑simple three‑line CSS solution.

Responsive Designwaterfall layout
0 likes · 4 min read
Mastering Waterfall Layouts: JS, jQuery, and CSS Implementations