BestHub
search
Sign in
Tag

waterfall layout

1 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 ScrollResponsive DesignTypeScript
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.

TypeScriptVuefrontend
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.

JavaScriptResponsive Designcss
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.

FlexboxJavaScriptcss
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.

asynchronous renderingduplicate itemsfrontend
0 likes · 12 min read
Resolving Duplicate Items in a Waterfall Flow Component with Asynchronous Rendering Control
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jan 25, 2021 · Frontend Development

Mastering Masonry Layouts: High‑Performance Dual‑Column Waterfall in H5

This article explores the concept, use‑cases, and step‑by‑step implementation of a high‑performance dual‑column waterfall (masonry) layout for mobile H5, covering Flexbox structure, dynamic data distribution, error‑correction techniques, and a DP‑based optimal arrangement algorithm.

DP algorithmFlexboxdynamic loading
0 likes · 13 min read
Mastering Masonry Layouts: High‑Performance Dual‑Column Waterfall in H5
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.

JavaScriptResponsive Designcss
0 likes · 4 min read
Mastering Waterfall Layouts: JS, jQuery, and CSS Implementations