BestHub
Sign in
Tag

Waterfall Layout

0 views collected around this technical thread.

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.

Infinite ScrollTypeScriptVue3
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.

TypeScriptVueWaterfall Layout
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.

CSSJavaScriptReact
0 likes · 13 min read
Responsive Waterfall Flow Layout Implementation in React
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 12, 2023 · Frontend Development

Implementing a Waterfall Layout with Flex in a Uni‑App

This article explains how to create a two‑column waterfall (masonry) layout in a Uni‑App using Flexbox, covering the visual design, CSS styling, data handling, dynamic loading, height calculation, and tab‑switch integration with complete code examples.

CSSFlexboxJavaScript
0 likes · 8 min read
Implementing a Waterfall Layout with Flex in a Uni‑App
政采云技术
政采云技术
May 10, 2023 · Frontend Development

Resolving Duplicate Items in a Waterfall Flow Component with Asynchronous Rendering Control

This article explains why duplicate products appear in a waterfall‑flow layout of a mini‑program, analyzes the root cause of concurrent asynchronous renders, and presents two solutions—using a flag and a promise‑based queue—to ensure only one dataRender runs at a time.

Waterfall Layoutasynchronous renderingduplicate items
0 likes · 12 min read
Resolving Duplicate Items in a Waterfall Flow Component with Asynchronous Rendering Control