Waterfall flow layout method, system and device based on height measurement and storage medium

Abstract

The invention provides a waterfall flow layout method, system and device based on height measurement and a storage medium. The method comprises the following steps: receiving a project data array; performing first invisible rendering on all items on a page; obtaining an actual height value of each item rendered on the page; taking one item in the item data array according to a preset sequence every time and adding the item to the current shortest column until the item data array is empty; obtaining item position information of each item according to an added result; reorganizing the items into a row data structure according to the item position information; using a row data structure, only rendering a row container in a visual area through a virtual rolling technology, and setting an item to be in a visible state; when a user scrolls a page, the virtual scrolling manager calculates a visual area range in real time, and dynamically loads and unloads the row container. According to the method, the calculation requirement of the waterfall flow layout can be reduced, the cross-platform compatibility is enhanced, and the waterfall flow layout efficiency and stability are improved.

Description

Technical Field

[0001] This invention relates to the field of web page development, and more specifically, to a waterfall layout method, system, device, and storage medium based on height measurement. Background Technology

[0002] Waterfall layout, also known as waterfall design, is a popular website layout characterized by its staggered, multi-column arrangement. As the page scrolls down, data blocks are continuously added and appended to the bottom. Pinterest was the first website to adopt this layout, and it gradually gained popularity in China. Most minimalist websites in China follow this style. Waterfall layouts are efficient and attractive for displaying images. The quick, scan-through mode allows users to absorb more information in a short time, while the lazy loading mode avoids the need for mouse clicks to turn pages. The main characteristic of waterfall layouts is their staggered arrangement; the fixed width but not fixed height design distinguishes it from traditional matrix-style image layouts. It cleverly utilizes visual hierarchy, and the free flow of the eye alleviates visual fatigue while giving a unique and unconventional feel, appealing to the individualistic psychology of young people.

[0003] Currently, the existing technologies for implementing waterfall layouts on mobile and web platforms mainly include the following solutions:

[0004] 1. Traditional CSS multi-column layout solution

[0005] Existing techniques use CSS's `column-count` property or `display:flex` to achieve multi-column layouts. This approach pre-determines the number of columns and then fills the content items into each column sequentially. However, this technique has the following drawbacks:

[0006] Layout order issue: Items are filled in column-wise first, resulting in a reading order that does not conform to user habits.

[0007] Inaccurate height calculation: It is impossible to accurately control the balance of column heights, which can easily lead to excessive differences in column heights.

[0008] Poor adaptability to dynamic content: The layout effect is unstable for highly unknown dynamic content.

[0009] 2. JavaScript Waterfall Layout Library Solution

[0010] Existing JavaScript waterfall layout libraries (such as Masonry and Isotope) achieve the waterfall effect through DOM manipulation and position calculation. Their technical approach is as follows:

[0011] Iterate through all project elements

[0012] Calculate the location of each item

[0013] Use absolute positioning or the transform property to set the position.

[0014] Main defects:

[0015] Performance bottleneck: Manipulating a large number of DOM elements when dealing with large amounts of data causes page rendering lag. Mobile compatibility: Inconsistent performance across different mobile devices and browsers.

[0016] 3. Existing cross-platform mobile deployment solutions

[0017] Existing cross-platform UI frameworks (such as React Native and Flutter) provide basic layout components, but they have limitations in implementing waterfall layouts:

[0018] Platform differences: Differences in rendering mechanisms and performance characteristics across different platforms lead to inconsistent layout effects.

[0019] Poor component reusability: Different layout logic needs to be written for different platforms.

[0020] Insufficient performance optimization: Lack of specific optimizations for waterfall layout scenarios

[0021] The root cause of the problem:

[0022] Measurement and layout separation: Existing technologies typically separate height measurement and position calculation, leading to multiple reflows and redraws.

[0023] Inefficient algorithm: lacks efficient column selection and position calculation algorithms.

[0024] Platform adaptation is complex: lacking a unified cross-platform layout abstraction layer.

[0025] These technical shortcomings make it difficult for existing waterfall layout solutions to provide a smooth and stable user experience when faced with large amounts of data, dynamic content, and multi-platform compatibility requirements.

[0026] Therefore, the present invention provides a waterfall layout method, system, device and storage medium based on height measurement. Summary of the Invention

[0027] In view of the problems in the prior art, the purpose of this invention is to provide a waterfall layout method, system, device and storage medium based on height measurement, which overcomes the difficulties of the prior art, reduces the computational requirements of waterfall layout, enhances cross-platform compatibility and improves the efficiency and stability of waterfall layout.

[0028] Embodiments of the present invention provide a waterfall layout method based on height measurement, comprising the following steps:

[0029] S110, Receive project data array;

[0030] S120. Perform an initial invisible rendering of all items in the project data array on the page;

[0031] S130. Obtain the actual height value of each item in the project data array rendered on the page;

[0032] S140. Each time, one item is taken from the item data array in a preset order and added to the current shortest column until the item data array is empty;

[0033] S150. Obtain the project location information for each project based on the results after adding;

[0034] S160. Reorganize the project into a row data structure according to the project location information;

[0035] S170. Using the reorganized row data structure, render only the row containers within the visible area using virtual scrolling technology, and set the items to a visible state; and

[0036] S180. Perform a scroll listening loop. When the user scrolls the page, the virtual scroll manager calculates the visible area in real time, dynamically loads and unloads the row container, and returns to step S110.

[0037] Preferably, step S110 includes:

[0038] S111. Receive an array of project data, the array of project data including a sequence of project data based on the user's search criteria, the sequence of project data including a number of sequentially arranged projects;

[0039] S112. Create a project height cache array to store the actual height value of each project. Initially, all height values ​​are set to null.

[0040] Preferably, step S120 includes: rendering all items in the project data array on the page for the first time, and setting the first rendered items to an invisible state.

[0041] Preferably, step S130 includes:

[0042] S131. Obtain the actual height value of each item in the project data array rendered on the page through the DOM boundary rectangle calculation interface;

[0043] S132. Store the actual height value in the corresponding position of the project height cache array.

[0044] Preferably, step S140 includes:

[0045] S141. Find the shortest column by comparing the current height of all columns;

[0046] S142. Take one item from the item data array in a preset order and add it to the shortest column;

[0047] S143, Feedback step S141, until the project data array is empty.

[0048] Preferably, step S150 includes: performing position calculation for the item based on the added result to obtain item position information, wherein the item position information includes at least the vertical offset and horizontal offset of each item.

[0049] Preferably, step S160 includes:

[0050] S161. Reorganize the project into a row data structure according to the project location information, and group the project into row containers of different heights according to the vertical position of the project. The number of horizontally expanded projects contained in each row container is equal to the preset number of columns.

[0051] S162. Calculate the actual height of the items grouped into each row, and take the bottom coordinates of the lowest item in the row as the current height of the row container corresponding to the row.

[0052] Embodiments of the present invention also provide a waterfall layout system based on height measurement, for implementing the above-described waterfall layout method based on height measurement, wherein the waterfall layout system based on height measurement includes:

[0053] The data receiving module receives the project data array;

[0054] The initial rendering module renders all items in the project data array on the page for the first time invisibly;

[0055] The actual height module retrieves the actual height value of each item in the project data array rendered on the page.

[0056] The project arrangement module takes one project from the project data array in a preset order and adds it to the shortest column each time until the project data array is empty;

[0057] The location calculation module obtains the project location information for each project based on the added results.

[0058] The row data module reorganizes the project into a row data structure based on the project location information;

[0059] The secondary rendering module uses the reorganized row data structure and virtual scrolling technology to render only the row containers within the visible area, setting the items to a visible state; and

[0060] The scroll monitoring module performs a scroll monitoring loop. When the user scrolls the page, the virtual scroll manager calculates the visible area in real time, dynamically loads and unloads row containers, and returns the data to the data receiving module.

[0061] Embodiments of the present invention also provide a waterfall layout device based on height measurement, comprising:

[0062] processor;

[0063] A memory in which executable instructions of the processor are stored;

[0064] The processor is configured to perform the steps of the above-described waterfall layout method based on height measurement by executing the executable instructions.

[0065] Embodiments of the present invention also provide a computer-readable storage medium for storing a program that, when executed, implements the steps of the above-described waterfall layout method based on height measurement.

[0066] The purpose of this invention is to provide a waterfall layout method, system, device, and storage medium based on height measurement, which can reduce the computational requirements of waterfall layout, enhance cross-platform compatibility, and improve the efficiency and stability of waterfall layout. Attached Figure Description

[0067] Other features, objects, and advantages of the invention will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings.

[0068] Figure 1 This is a flowchart of the waterfall layout method based on height measurement according to the present invention.

[0069] Figure 2 This is a schematic diagram of the system framework of the waterfall layout method based on height measurement of the present invention.

[0070] Figure 3 This is a schematic diagram illustrating the implementation process of the waterfall layout method based on height measurement according to the present invention.

[0071] Figure 4 This is a schematic diagram of the shortest column selection algorithm in the waterfall layout method based on height measurement of the present invention.

[0072] Figure 5 This is a schematic diagram of the waterfall layout system based on height measurement according to the present invention.

[0073] Figure 6This is a structural schematic diagram of the waterfall layout device based on height measurement according to the present invention.

[0074] Figure 7 This is a schematic diagram of the structure of a computer-readable storage medium according to an embodiment of the present invention. Detailed Implementation

[0075] The following specific examples illustrate the implementation methods of this application. Those skilled in the art can easily understand the other advantages and effects of this application from the content disclosed herein. This application can also be implemented or applied through other different specific embodiments, and various details in this application can be modified or changed according to different viewpoints and application systems without departing from the spirit of this application. It should be noted that, unless otherwise specified, the embodiments and features in the embodiments of this application can be combined with each other.

[0076] The embodiments of this application will now be described in detail with reference to the accompanying drawings, so that those skilled in the art can easily implement the application. This application may be embodied in many different forms and is not limited to the embodiments described herein.

[0077] In this application, the terms "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics represented in connection with that embodiment or example, which are included in at least one embodiment or example of this application. Furthermore, the specific features, structures, materials, or characteristics represented may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate different embodiments or examples represented in this application, as well as features of different embodiments or examples.

[0078] Furthermore, the terms "first" and "second" are used for illustrative purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the representation of this application, "multiple" means two or more, unless otherwise explicitly specified.

[0079] For the purpose of clearly describing this application, devices that are not relevant to the description are omitted, and the same or similar components throughout the specification are given the same reference numerals.

[0080] Throughout this specification, when it is said that a device is "connected" to another device, this includes not only "direct connection" but also "indirect connection" by placing other components in between. Furthermore, when it is said that a device "comprises" a certain constituent element, unless otherwise stated otherwise, this does not exclude other constituent elements, but rather implies that other constituent elements may be included.

[0081] When we say that a device is "above" another device, this can mean that it is directly above the other device, or it can mean that other devices are present in between. Conversely, when we say that a device is "directly" "above" another device, there are no other devices present in between.

[0082] Although the terms first, second, etc., are used in some instances herein to refer to various elements, these elements should not be limited by these terms. These terms are used only to distinguish one element from another. For example, first interface and second interface, etc., are used. Furthermore, as used herein, the singular forms “a,” “an,” and “the” are intended to also include the plural forms unless the context indicates otherwise. It should be further understood that the terms “comprising,” “including,” indicate the presence of features, steps, operations, elements, components, items, kinds, and / or groups, but do not exclude the presence, occurrence, or addition of one or more other features, steps, operations, elements, components, items, kinds, and / or groups. The terms “or” and “and / or” as used herein are interpreted as inclusive, or mean any one or any combination thereof. Thus, “A, B, or C” or “A, B, and / or C” means “any one of: A; B; C; A and B; A and C; B and C; A, B, and C.” Exceptions to this definition will only occur if the combination of elements, functions, steps, or operations is inherently mutually exclusive in some way.

[0083] The technical terms used herein are for reference only to specific embodiments and are not intended to limit the scope of this application. The singular form used herein includes the plural form unless the statement explicitly indicates otherwise. The word "comprising" as used in the specification means to specify a particular characteristic, region, integer, step, operation, element, and / or component, and does not exclude the presence or addition of other characteristics, regions, integers, steps, operations, elements, and / or components.

[0084] Although not explicitly defined, all terms, including technical and scientific terms used herein, shall have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains. Terms defined in commonly used dictionaries shall be further interpreted as having a meaning consistent with the relevant technical literature and the content of this present application, and shall not be over-interpreted as having an ideal or overly formulaic meaning unless otherwise defined.

[0085] Figure 1This is a flowchart of the waterfall layout method based on height measurement according to the present invention. Figure 1 As shown, the waterfall layout method based on height measurement of the present invention includes:

[0086] S110, Receive project data array.

[0087] S120. Perform an initial invisible rendering of all items in the project data array on the page. In this invention, "invisible state" refers to setting the state of the first-rendered items to an undisplayed state, thereby ensuring that users cannot see these rendering effects from the display interface, thus avoiding layout jitter caused when loading various items.

[0088] S130. Get the actual height value of each item in the project data array rendered on the page.

[0089] S140. Each time, take one item from the item data array in a preset order and add it to the shortest column until the item data array is empty.

[0090] S150. Obtain the project location information for each project based on the results after adding the information.

[0091] S160. Reorganize the project into a row data structure based on the project location information.

[0092] S170. Using the reorganized row data structure, only the row containers within the visible area are rendered using virtual scrolling technology, and the items are set to a visible state. In this invention, "visible state" refers to setting the state of the initially rendered items to a display state, allowing users to intuitively see the rendered row containers on the user interface.

[0093] S180. Perform a scroll listening loop. When the user scrolls the page, the virtual scroll manager calculates the visible area in real time, dynamically loads and unloads the row container, and returns to step S110.

[0094] The purpose of this invention is to provide a waterfall layout method and system based on dynamic height measurement, to solve the problems of low performance and poor cross-platform compatibility in existing waterfall layouts when handling items of unequal height. This invention relates to the field of computer graphical user interface layout technology, specifically a waterfall layout rendering method suitable for mobile and web platforms. Its improvement lies in the adoption of a technical solution combining dynamic height measurement and two-stage rendering, achieving high-performance display of items of unequal height through virtual scrolling and a shortest column-first algorithm.

[0095] In a preferred embodiment, step S110 includes:

[0096] S111. Receive an array of project data, which includes a sequence of project data based on the user's search criteria. The sequence of project data includes several projects arranged in order.

[0097] S112. Create a project height cache array to store the actual height value of each project. Initially, all height values ​​are set to null, but this is not a limitation.

[0098] In a preferred embodiment, step S120 includes: rendering all items in the item data array on the page for the first time, and setting the items rendered for the first time to an invisible state, but is not limited thereto. In a preferred embodiment, step S130 includes:

[0099] S131. Obtain the actual height value of each item in the project data array rendered on the page through the DOM bounding rectangle calculation interface.

[0100] S132. Store the actual height value in the corresponding position of the project height cache array, but not limited to this.

[0101] In a preferred embodiment, step S140 includes:

[0102] S141. Find the shortest column by comparing the current height of all columns.

[0103] S142. Take one item from the item data array in a preset order and add it to the shortest column.

[0104] S143, Feedback step S141, until the project data array is empty, but not limited to this.

[0105] In a preferred embodiment, step S150 includes: calculating the position of the project based on the added result to obtain the project position information, which includes at least the vertical offset and the horizontal offset of each project, but is not limited thereto.

[0106] In a preferred embodiment, step S160 includes:

[0107] S161. Reorganize the projects into a row data structure according to the project location information, and group them into row containers of different heights according to the vertical position of the projects. The number of horizontally expanded projects contained in each row container is equal to the preset number of columns.

[0108] S162. Calculate the actual height of the items grouped into each row, and take the bottom coordinates of the lowest item in the row as the current height of the row container corresponding to the row, but this is not a limitation.

[0109] This invention addresses the problem of accurate layout calculations in existing technologies when the project height is unknown, achieving an organic combination of height measurement and position calculation. It resolves performance bottlenecks in existing waterfall layout solutions, such as page lag and excessive memory usage when handling large amounts of data. It also addresses the inconsistency in layout effects across different platforms (H5, mini-programs, mobile devices), requiring repetitive development. Furthermore, it overcomes the inefficiency of existing column selection algorithms, which suffer from high computational complexity and frequent position updates. Through this invention, efficient and stable waterfall layouts can be achieved even when the project height is unknown, significantly improving rendering performance, enhancing user experience, and providing a unified cross-platform solution.

[0110] The technical problem to be solved by this invention is to overcome the problems of inaccurate dynamic height item layout calculation, low rendering performance of large data volume, and insufficient cross-platform compatibility in existing waterfall layout technology, and to provide a waterfall layout method and system that can achieve efficient layout calculation, significantly improve rendering performance, improve user experience, and unify cross-platform implementation when the item height is unknown.

[0111] The waterfall layout method based on dynamic height measurement of the present invention is used to realize the waterfall layout display of items with different heights on mobile and web devices, characterized in that:

[0112] This invention adopts a technical approach that combines dynamic height measurement with two-stage rendering: the first stage renders all items to obtain real height data, and the second stage recalculates the position based on the height data and performs the final rendering; the data structure is organized by row through virtual scrolling technology, the layout calculation is performed using the shortest column first algorithm, the absolute positioning method is used to achieve precise layout control, and a unified cross-platform adaptation interface is provided.

[0113] Specific technical features of the present invention:

[0114] Dynamic height measurement mechanism: Establish a project height cache array to monitor project height changes in real time, and trigger position recalculation when a height update is detected;

[0115] Two-stage rendering strategy: The initial rendering stage aims to obtain the true height of the project, while the layout calculation stage optimizes the position based on the height data;

[0116] Shortest column first algorithm: Iterate through all column heights, assign the new item to the column with the smallest current height, and update the height of that column;

[0117] Virtual scrolling optimization: Reorganizes individual item data by row, reduces the number of DOM operations, and provides scroll position calculation and visible area management;

[0118] Absolute positioning layout: This layout uses a combination of relative percentage width and absolute pixel position to ensure consistent layout across different screen sizes.

[0119] Ideally, the dynamic height measurement mechanism uses an asynchronous measurement method, calculating the true height of the project through the DOM boundary rectangle, thus avoiding page blocking caused by synchronous measurement.

[0120] Preferably, a forced re-render flag is set in the two-stage rendering strategy to ensure that the position is recalculated only once after the height data is complete, thus avoiding duplicate calculations.

[0121] Ideally, the virtual scrolling optimization employs a row height pre-calculation mechanism, which determines the row height by analyzing the tallest item within the row, thereby achieving precise scrolling position management.

[0122] Ideally, cross-platform adaptation uses an environment detection mechanism to adjust layout parameters based on the rendering characteristics of different platforms, such as relative position calculation for mobile platforms and absolute position calculation for H5 platforms.

[0123] Differences from existing solutions:

[0124] The main difference between this invention and existing technologies is that it organically combines height measurement, position calculation, and rendering optimization to form a complete technology chain, rather than simply adding up functions; it adopts a phased processing strategy to avoid the performance problems caused by simultaneous measurement and layout in traditional solutions; and it solves the rendering efficiency problem in large data scenarios through a row-level organization method of virtual scrolling.

[0125] Compared with the prior art, the present invention has the following advantages:

[0126] (1) Significantly improve rendering performance

[0127] This invention organizes individual items by row using virtual scrolling technology, significantly reducing the number of DOM operations and effectively solving the problem of rendering lag when dealing with large amounts of data in existing technologies.

[0128] (2) Achieve accurate layout calculation

[0129] This invention combines dynamic height measurement with the shortest column priority algorithm. By obtaining the actual height of the project in real time for layout calculation, the layout accuracy reaches 100%, avoiding the problems of excessive column height differences and disordered reading order in traditional CSS multi-column layouts.

[0130] (3) Achieve unified cross-platform compatibility

[0131] This invention achieves a consistent layout across H5, mini-programs, and mobile devices through an environment detection mechanism and a unified layout interface, with a code reuse rate of over 95%. It solves the problem of repeated development for different platforms in existing technologies and reduces development and maintenance costs.

[0132] (4) Provide efficient algorithm optimization

[0133] This invention employs a shortest column first algorithm with O(n) time complexity, which can achieve millisecond-level position calculation and update when dynamically adding new items.

[0134] (5) Overall effect:

[0135] This invention organically combines dynamic height measurement, efficient layout algorithms, and rendering optimization techniques to form a complete technical solution. It fundamentally solves the limitations of existing waterfall layout technologies in terms of performance, accuracy, and compatibility, and provides a high-performance, highly available waterfall layout implementation solution for mobile and web applications.

[0136] The specific embodiments of the present invention are as follows:

[0137] Figure 2 This is a schematic diagram of the system framework of the waterfall layout method based on height measurement according to the present invention. Figure 2 The overall implementation architecture of the height-measurement-based waterfall layout method of the present invention adopts a layered architecture design, including the main component modules: data management layer, layout calculation layer, rendering control layer, platform adaptation layer, as well as the interaction relationships and data flow between each layer. The layers interact through standardized interfaces to ensure the modularity and scalability of the system. Figure 3 This is a schematic diagram illustrating the implementation process of the waterfall layout method based on height measurement according to the present invention. Figure 3 The complete workflow of the present invention is demonstrated, including key steps such as data input, two-stage rendering, height measurement, layout calculation, and virtual scrolling management, as well as the logical relationships and loop control between each step. Figure 4 This is a schematic diagram of the shortest column selection algorithm in the waterfall layout method based on height measurement of the present invention. Figure 4 The specific implementation steps of the core algorithm of this invention are shown in detail, including the execution logic of key operations such as column height comparison, item position calculation, and height update.

[0138] Reference manual attached Figure 2 , 3 As shown in Figure 4, the implementation process of the waterfall layout method based on height measurement of the present invention includes the following steps:

[0139] Step 1: System Initialization and Data Preparation

[0140] Reference Figure 3 At the starting node, the system first receives the input project data array and initializes the core data structure. The data management layer establishes a project height cache array to store the actual height value of each project; initially, all height values ​​are set to null. Simultaneously, a data source manager is created, responsible for converting the raw project data into a row organization structure suitable for the waterfall layout. The platform adaptation layer detects the current platform type based on the runtime environment and provides platform-specific parameter configurations for subsequent layout calculations.

[0141] Step Two: First Stage Rendering Execution

[0142] according to Figure 3 The "First Stage Rendering" node in the process involves the rendering control layer initiating the initial rendering process. The main goal of this stage is to allow all items to be rendered on the page for the first time in order to obtain their true height data. The rendering system uses transparency control technology to set the items to an invisible state before the height measurement is completed (ensuring that users cannot see these newly rendered items on the page), thus avoiding layout jitter for the user.

[0143] Step 3: Dynamic Height Measurement Mechanism

[0144] correspond Figure 3 In the "Measure Project Height" node, the system initiates an asynchronous height measurement process. Each rendered project component obtains its actual height through the DOM boundary rectangle calculation interface and stores the result in the corresponding position in the height cache array. The measurement process employs a batch processing mechanism to avoid frequent DOM query operations impacting performance. When a change in the height of a project is detected, the system immediately updates the cache and checks whether the heights of all projects have been measured.

[0145] Step 4: Execution of the layout calculation algorithm

[0146] Reference Figure 4 The shortest column-first algorithm is described below. After the height of all items has been measured, the layout calculation layer begins to execute the core algorithm. The system first initializes the column height array, setting the initial height of each column to zero. Then, it iterates through all item data, and for each item, finds the shortest column by comparing the current heights of all columns. Unlike existing technologies, this invention uses a single-pass O(n) algorithm, avoiding multiple loop comparisons in traditional solutions.

[0147] Step 5: Position Calculation and Column Height Update

[0148] Continue according to Figure 4The system calculates the precise position of each item in the shortest column. Position calculation includes two dimensions: vertical offset and horizontal offset. The vertical offset equals the current height of the target column, and the horizontal offset is calculated as a percentage of the position based on the column index and the total number of columns. The platform adaptation layer plays a role in this step, adjusting accordingly to the differences in coordinate systems across different platforms. After calculation, the system immediately updates the height value of the target column to prepare for the position calculation of the next item.

[0149] Step Six: Data Reorganization and Row Structure Construction

[0150] correspond Figure 3 The "Organize Data by Row" node in the system reorganizes the calculated project location information into a row data structure. This is one of the key innovations of this invention, as it significantly reduces the computational complexity of virtual scrolling by converting the original item-by-item management to row-by-row management. The system groups projects into different rows according to their vertical position, with each row containing the same number of projects as the number of columns. Simultaneously, the height of each row is calculated, and the bottom coordinates of the lowest-positioned project in that row are taken as the row height.

[0151] Step 7: Second Stage Rendering and Virtual Scrolling

[0152] Reference Figure 3 In the "Second Stage Rendering" node, the rendering control layer initiates the final rendering process. This stage uses a restructured row data structure and renders only the rows within the visible area using virtual scrolling technology. Items within each row container are placed using absolute positioning to ensure layout accuracy. The system also enables transparency control, setting the items to full visibility (allowing users to directly see these rendered row containers) for a smooth visual presentation.

[0153] Step 8: Scrolling Event Handling and Dynamic Updates

[0154] correspond Figure 3 Within the scroll listening loop, the system establishes a continuous scroll event listening mechanism. When the user scrolls the page, the virtual scroll manager calculates the visible area in real time, dynamically loading and unloading row containers. Simultaneously, it listens for data change events; when new item data is added or the height of an existing item changes, the system automatically triggers a recalculation process to ensure layout accuracy and responsiveness.

[0155] Step Nine: Performance Optimization and Memory Management

[0156] The system employs multiple performance optimization strategies throughout its operation. These include using memoization to cache computation results and avoiding redundant calculations; and reusing DOM elements through virtual scrolling to reduce memory allocation and deallocation overhead. These optimizations ensure stable performance even under large data volume scenarios.

[0157] By organically combining the above nine steps, this invention successfully achieves a high-performance waterfall layout effect. Compared with existing technologies, this implementation significantly improves layout accuracy, rendering performance, user experience, and platform compatibility. In particular, by combining dynamic height measurement with two-stage rendering, it solves the layout problem of items with unknown heights in traditional solutions; and through row-level optimization of virtual scrolling, it achieves a smooth scrolling experience in scenarios with large amounts of data.

[0158] In summary, the waterfall layout system based on height measurement of the present invention can reduce the computational requirements of waterfall layout, enhance cross-platform compatibility, and improve the efficiency and stability of waterfall layout.

[0159] Figure 5 This is a schematic diagram of the waterfall layout system based on height measurement according to the present invention. Figure 5 As shown, embodiments of the present invention also provide a waterfall layout system based on height measurement, used to implement the above-described waterfall layout method based on height measurement. The waterfall layout system 5 based on height measurement includes:

[0160] Data receiving module 51 receives the project data array.

[0161] The initial rendering module 52 renders all items in the project data array in an invisible manner on the page for the first time.

[0162] Actual Height Module 53 retrieves the actual height value of each item in the project data array as rendered on the page.

[0163] The project arrangement module 54 takes one project from the project data array in a preset order and adds it to the shortest column each time until the project data array is empty.

[0164] The location calculation module 55 obtains the project location information for each project based on the added results.

[0165] Row data module 56 reorganizes the project into a row data structure based on the project location information.

[0166] The secondary rendering module 57 uses the reorganized row data structure and virtual scrolling technology to render only the row containers within the visible area, setting the items to a visible state.

[0167] The scroll listening module 58 performs a scroll listening loop. When the user scrolls the page, the virtual scroll manager calculates the visible area in real time, dynamically loads and unloads the row container, and returns the data to the data receiving module.

[0168] In a preferred embodiment, the data receiving module 51 is configured to receive an array of project data, which includes a sequence of project data based on user search criteria. The sequence of project data includes several sequentially arranged projects. An array of project heights is established to store the actual height value of each project. Initially, all height values ​​are set to null, but this is not a limitation.

[0169] In a preferred embodiment, the initial rendering module 52 is configured to render all items in the item data array on the page for the first time, and to set the items rendered for the first time to an invisible state, but is not limited thereto.

[0170] In a preferred embodiment, the actual height module 53 is configured to obtain the actual height value of each item in the item data array rendered on the page through the DOM bounding rectangle calculation interface. The actual height value is stored in the corresponding position of the item height cache array, but this is not a limitation.

[0171] In a preferred embodiment, the item arrangement module 54 is configured to find the shortest column by comparing the current height of all columns. Items are then added to the shortest column in a preset order from the item data array until the item data array is empty, but this is not a limitation.

[0172] In a preferred embodiment, the location calculation module 55 is configured to perform location calculations for the items based on the added results to obtain item location information, which includes at least the vertical offset and horizontal offset of each item, but is not limited thereto.

[0173] In a preferred embodiment, the row data module 56 is configured to reorganize the items into a row data structure based on the item location information, grouping the items into row containers of different heights according to their vertical position. The number of horizontally expanded items contained in each row container is equal to the preset number of columns. The actual height of the items grouped into each row is calculated, and the bottom coordinates of the lowest-positioned item in that row are taken as the current height of the row container corresponding to that row, but this is not a limitation.

[0174] The waterfall layout system based on height measurement of the present invention can reduce the computational requirements of waterfall layout, enhance cross-platform compatibility, and improve the efficiency and stability of waterfall layout.

[0175] This invention also provides a height-measurement-based waterfall layout device, including a processor and a memory storing executable instructions for the processor. The processor is configured to execute steps of a height-measurement-based waterfall layout method via the executable instructions.

[0176] As shown above, the waterfall layout device based on height measurement of the present invention in this embodiment can reduce the computational requirements of waterfall layout, enhance cross-platform compatibility, and improve the efficiency and stability of waterfall layout.

[0177] Those skilled in the art will understand that various aspects of the present invention can be implemented as systems, methods, or program products. Therefore, various aspects of the present invention can be specifically implemented in the following forms: a completely hardware implementation, a completely software implementation (including firmware, microcode, etc.), or a combination of hardware and software aspects, collectively referred to herein as a "circuit," "module," or "platform."

[0178] Figure 6 This is a structural schematic diagram of the waterfall layout device based on height measurement according to the present invention. See below for reference. Figure 6 To describe an electronic device 600 according to this embodiment of the present invention. Figure 6 The electronic device 600 shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of the present invention.

[0179] like Figure 6 As shown, the electronic device 600 is presented in the form of a general-purpose computing device. The components of the electronic device 600 may include, but are not limited to: at least one processing unit 610, at least one storage unit 620, a bus 630 connecting different platform components (including storage unit 620 and processing unit 610), a display unit 640, etc.

[0180] The storage unit stores program code, which can be executed by the processing unit 610 to perform the steps described in the method section of this specification according to various exemplary embodiments of the present invention. For example, the processing unit 610 can perform actions such as... Figure 1 The steps are shown in the figure.

[0181] Storage unit 620 may include a readable medium in the form of a volatile storage unit, such as random access memory (RAM) 6201 and / or cache memory 6202, and may further include a read-only memory (ROM) 6203.

[0182] Storage unit 620 may also include a program / utility 6204 having a set (at least one) program module 6205, such program module 6205 including but not limited to: operating system, one or more application programs, other program modules and program data, each or some combination of these examples may include an implementation of a network environment.

[0183] Bus 630 can represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the multiple bus structures.

[0184] Electronic device 600 can also communicate with one or more external devices 700 (e.g., keyboard, pointing device, Bluetooth device, etc.), and with one or more devices that enable a user to interact with electronic device 600, and / or with any device that enables electronic device 600 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via input / output (I / O) interface 650. Furthermore, electronic device 600 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 660. Network adapter 660 can communicate with other modules of electronic device 600 via bus 630. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms.

[0185] This invention also provides a computer-readable storage medium for storing a program that, when executed, implements the steps of a height-measurement-based waterfall layout method. In some possible implementations, various aspects of the invention can also be implemented as a program product comprising program code that, when run on a terminal device, causes the terminal device to perform the steps described in the foregoing method section of this specification according to various exemplary embodiments of the invention.

[0186] As shown above, the waterfall layout system based on height measurement of this invention can reduce the computational requirements of waterfall layout, enhance cross-platform compatibility, and improve the efficiency and stability of waterfall layout.

[0187] Figure 7 This is a schematic diagram of the structure of the computer-readable storage medium of the present invention. (Reference) Figure 7 As shown, a program product 800 for implementing the above-described method according to an embodiment of the present invention is described. This product may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited thereto. In this document, the readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0188] The program product may employ any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (a non-exhaustive list) of readable storage media include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0189] Computer-readable storage media may include data signals propagated in baseband or as part of a carrier wave, carrying readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable storage medium may also be any readable medium other than a readable storage medium that can transmit, propagate, or transfer a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the readable storage medium may be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.

[0190] Program code for performing the operations of this invention can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java and C++, and conventional procedural programming languages ​​such as C or similar languages. The program code can execute entirely on the user's computing device, partially on the user's device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0191] In summary, the purpose of this invention is to provide a waterfall layout method, system, device, and storage medium based on height measurement, which can reduce the computational requirements of waterfall layout, enhance cross-platform compatibility, and improve the efficiency and stability of waterfall layout.

[0192] The above description, in conjunction with specific preferred embodiments, provides a further detailed explanation of the present invention. It should not be construed that the specific implementation of the present invention is limited to these descriptions. For those skilled in the art, various simple deductions or substitutions can be made without departing from the concept of the present invention, and all such modifications and substitutions should be considered within the scope of protection of the present invention.

Claims

1. A waterfall layout method based on height measurement, characterized in that, Includes the following steps: S110, Receive project data array; S120. Perform an initial invisible rendering of all items in the project data array on the page; S130. Obtain the actual height value of each item in the project data array rendered on the page; S140. Each time, one item is taken from the item data array in a preset order and added to the current shortest column until the item data array is empty; S150. Obtain the project location information for each project based on the results after adding; S160. Reorganize the project into a row data structure according to the project location information; S170. Using the reorganized row data structure, render only the row containers within the visible area using virtual scrolling technology, and set the items to a visible state. as well as S180. Perform a scroll listening loop. When the user scrolls the page, the virtual scroll manager calculates the visible area in real time, dynamically loads and unloads the row container, and returns to step S110.

2. The waterfall layout method based on height measurement as described in claim 1, characterized in that, Step S110 includes: S111. Receive an array of project data, the array of project data including a sequence of project data based on the user's search criteria, the sequence of project data including a number of sequentially arranged projects; S112. Create a project height cache array to store the actual height value of each project. Initially, all height values ​​are set to null.

3. The waterfall layout method based on height measurement as described in claim 2, characterized in that, Step S120 includes: rendering all items in the project data array on the page for the first time, and setting the items rendered for the first time to an invisible state.

4. The waterfall layout method based on height measurement as described in claim 2, characterized in that, Step S130 includes: S131. Obtain the actual height value of each item in the project data array rendered on the page through the DOM boundary rectangle calculation interface; S132. Store the actual height value in the corresponding position of the project height cache array.

5. The waterfall layout method based on height measurement as described in claim 1, characterized in that, Step S140 includes: S141. Find the shortest column by comparing the current height of all columns; S142. Take one item from the item data array in a preset order and add it to the shortest column; S143, Feedback step S141, until the project data array is empty.

6. The waterfall layout method based on height measurement as described in claim 1, characterized in that, Step S150 includes: performing position calculations for the items based on the added results to obtain item position information, wherein the item position information includes at least the vertical offset and horizontal offset of each item.

7. The waterfall layout method based on height measurement as described in claim 1, characterized in that, Step S160 includes: S161. Reorganize the project into a row data structure according to the project location information, and group the project into row containers of different heights according to the vertical position of the project. The number of horizontally expanded projects contained in each row container is equal to the preset number of columns. S162. Calculate the actual height of the items grouped into each row, and take the bottom coordinates of the lowest item in the row as the current height of the row container corresponding to the row.

8. A waterfall layout system based on height measurement, used to implement the waterfall layout method based on height measurement as described in claim 1, characterized in that, include: The data receiving module receives the project data array; The initial rendering module renders all items in the project data array on the page for the first time invisibly; The actual height module retrieves the actual height value of each item in the project data array rendered on the page. The project arrangement module takes one project from the project data array in a preset order and adds it to the shortest column each time until the project data array is empty; The location calculation module obtains the project location information for each project based on the added results. The row data module reorganizes the project into a row data structure based on the project location information; The secondary rendering module uses the reorganized row data structure and virtual scrolling technology to render only the row containers within the visible area, and sets the items to a visible state; as well as The scroll monitoring module performs a scroll monitoring loop. When the user scrolls the page, the virtual scroll manager calculates the visible area in real time, dynamically loads and unloads row containers, and returns the data to the data receiving module.

9. A waterfall flow layout device based on height measurement, characterized in that, include: processor; A memory in which executable instructions of the processor are stored; The processor is configured to perform the steps of the height-measurement-based waterfall layout method according to any one of claims 1 to 7 by executing the executable instructions.

10. A computer-readable storage medium for storing a program, characterized in that, When the program is executed by the processor, it implements the steps of the waterfall layout method based on height measurement as described in any one of claims 1 to 7.

Images