Virtual waterfall flow method and device of production research platform, storage medium and product

Abstract

The invention relates to the technical field of smart home, and provides a virtual waterfall flow method and device for a production and research platform, a storage medium and a product, and the method comprises the steps: generating a card corresponding to each piece of data, and determining an index corresponding to each card; determining an initial index range of a viewport according to the initial position of the scroll bar, and rendering all cards corresponding to the initial index range of the viewport into the viewport; if the scroll event trigger is monitored, updating the current index range of the viewport according to the current position of the scroll bar; and rendering all cards corresponding to the current index range of the viewport into the viewport. According to the scheme, data display is realized based on the virtual waterfall flow, the virtual waterfall flow ensures that during the rolling period of the waterfall flow, the actually rendered DOM is controlled in the viewport range displayed to the user, and other data is only stored in the memory. When the data volume is large, the DOM operation cost is saved, smooth display is achieved, and the display performance is improved.

Description

Technical Field

[0001] The present application relates to the field of smart home technology, and in particular to a virtual waterfall flow method, device, storage medium and product of a production and research platform. Background Art

[0002] One-stop R&D platforms, such as ZONE, require a privacy list when entering product requirements, if the product requirements involve user privacy. There are hundreds of privacy list options. Each time the user checks a privacy list option, they need to fill in the corresponding information and upload the corresponding policy image, and the privacy item will be displayed in the form of a card below.

[0003] In practice, the length of the supplementary privacy information filled in by users is uncertain. If a fixed-height list is used, there will be a lot of blank space for cards with less content, which is not very beautiful. Most applications now use a waterfall flow method, where the height of the card is expanded by the content, and the lower card is arranged next to the upper card, so there will be no blank cards. Each card in the waterfall flow needs to calculate its specific position based on the DOM.

[0004] However, when the amount of data is large, the DOM calculations that need to be performed may be hundreds or thousands of times. The cost of operating the DOM is high. Such frequent and large-scale operations and calculations will cause performance loss, resulting in unsmooth scrolling and even frame drops. Summary of the invention

[0005] The present application provides a virtual waterfall flow method, device, storage medium and product of a production and research platform, which are used to solve the defects of the prior art that when the amount of data is large, the cost of operating DOM is high and the display is not smooth when scrolling. When the amount of data is large, the cost of operating DOM is saved, smooth display is achieved, and the display performance is improved.

[0006] The present application provides a virtual waterfall flow method for a production and research platform, the method comprising:

[0007] Acquire a data source, where the data source includes multiple pieces of data;

[0008] Generate a card corresponding to each piece of data and determine the index corresponding to each card;

[0009] Determine the initial index range of the viewport according to the initial position of the scroll bar, and render all cards corresponding to the indexes within the initial index range of the viewport into the viewport;

[0010] If a scroll event is detected, the current index range of the viewport is updated according to the current position of the scroll bar, and all cards corresponding to the indexes within the current index range of the viewport are rendered into the viewport.

[0011] According to a virtual waterfall flow method of a production and research platform provided by the present application, before obtaining the data source, the method further includes:

[0012] According to display requirements, set the viewport width, viewport height, and the width of each column of the virtual waterfall flow;

[0013] The number of columns of the virtual waterfall flow is calculated according to the width of the viewport and the width of each column of the virtual waterfall flow.

[0014] According to a virtual waterfall flow method of a production and research platform provided by the present application, before determining the initial index range of the viewport according to the initial position of the scroll bar, the method further includes:

[0015] Traversing the data source, performing adding processing on each card in turn, and realizing adding all cards to the corresponding columns of the virtual waterfall flow; wherein the adding processing includes: taking the column with the smallest current total height among all the columns of the virtual waterfall flow as the column to be added; adding the card to the column to be added, and updating the total height of the column to be added;

[0016] Determining the initial index range of the viewport according to the initial position of the scroll bar includes:

[0017] The initial index range of the viewport is calculated according to the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow.

[0018] According to a virtual waterfall flow method of a production and research platform provided by the present application, after generating a card corresponding to each piece of data and determining an index corresponding to each card, the method further includes:

[0019] Create a height array, the length of the height array is consistent with the number of columns of the virtual waterfall flow, and the height array is used to store the total height of each column of the virtual waterfall flow;

[0020] The method of taking the column with the lowest total height among all the columns of the virtual waterfall flow as the column to be added specifically includes:

[0021] Traversing the height array, and taking the column corresponding to the minimum total height stored in the height array as the column to be added;

[0022] The updating of the total height of the to-be-added column specifically includes:

[0023] The height of the card and the current total height of the column to be added are cumulatively calculated, and the total height of the column to be added stored in the height array is updated.

[0024] According to a virtual waterfall flow method of a production and research platform provided by the present application, the updating of the current index range of the viewport according to the current position of the scroll bar includes:

[0025] Calculate the current start index of the viewport according to the current position of the scroll bar and the current total height of each column of the virtual waterfall flow;

[0026] Calculate the bottom position of the viewport according to the height of the viewport and the current position of the scroll bar;

[0027] The current end index of the viewport is calculated according to the bottom position of the viewport, the current start index of the viewport, and the current total height of each column of the virtual waterfall flow.

[0028] According to a virtual waterfall flow method of a production and research platform provided by the present application, the method further includes:

[0029] Removes cards outside the current index range of the viewport.

[0030] The present application also provides a virtual waterfall flow device for a production and research platform, the device comprising:

[0031] An acquisition module, used to acquire a data source, wherein the data source includes multiple pieces of data;

[0032] A generation module is used to generate a card corresponding to each piece of data according to each piece of data, and determine the index corresponding to each card;

[0033] A processing module, used to determine an initial index range of the viewport according to an initial position of the scroll bar, and render all cards corresponding to indexes within the initial index range of the viewport into the viewport;

[0034] The monitoring module is used to update the current index range of the viewport according to the current position of the scroll bar if a scroll event is triggered, and render all cards corresponding to the indexes within the current index range of the viewport into the viewport.

[0035] The present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the steps of the virtual waterfall flow method of the production and research platform as described in any one of the above-mentioned methods are implemented.

[0036] The present application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the virtual waterfall flow method of the production and research platform as described in any of the above-mentioned ones.

[0037] The present application also provides a computer program product, including a computer program, which, when executed by a processor, implements the steps of the virtual waterfall flow method of the production and research platform as described in any of the above-mentioned methods.

[0038] The virtual waterfall method, device, storage medium and product of the production and research platform provided by the present application generate a card corresponding to each piece of data and determine the index corresponding to each card; determine the initial index range of the viewport according to the initial position of the scroll bar, and render all the cards corresponding to the initial index range of the viewport into the viewport; if a scroll event is triggered, update the current index range of the viewport according to the current position of the scroll bar; render all the cards corresponding to the current index range of the viewport into the viewport. The scheme of the present application realizes the display of data based on the virtual waterfall flow. The virtual waterfall flow ensures that during the scrolling of the waterfall flow, the real rendered DOM is controlled within the viewport range displayed to the user, and other data is only stored in the memory. Especially when the amount of data is large, the cost of operating the DOM is saved, smooth display is achieved, and the display performance is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] In order to more clearly illustrate the technical solutions in the present application or the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0040] Figure 1 It is a hardware environment diagram of an interaction method of a smart device according to an embodiment of the present application.

[0041] Figure 2 This is one of the flow charts of the virtual waterfall flow method of the production and research platform provided in this application.

[0042] Figure 3 This is the second flow chart of the virtual waterfall flow method of the production and research platform provided in this application.

[0043] Figure 4 It is a structural schematic diagram of the virtual waterfall flow device of the production and research platform provided in this application.

[0044] Figure 5 It is a schematic diagram of the structure of the electronic device provided in this application. DETAILED DESCRIPTION

[0045] In order to make the purpose, technical solutions and advantages of this application clearer, the technical solutions in this application will be clearly and completely described below in conjunction with the drawings in this application. Obviously, the described embodiments are part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0046] It should be noted that the terms "first", "second", etc. in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0047] According to one aspect of an embodiment of the present application, a virtual waterfall flow method of a production and research platform is provided. The virtual waterfall flow method of the production and research platform is widely used in smart home (Smart Home), smart home, smart home equipment ecology, smart residential (Intelligence House) ecology and other whole-house intelligent digital control application scenarios. Optionally, in this embodiment, the virtual waterfall flow method of the production and research platform can be applied to Figure 1 In the hardware environment composed of the terminal device 102 and the server 104 shown in FIG. Figure 1 As shown, the server 104 is connected to the terminal device 102 via a network, and can be used to provide services (such as application services, etc.) for the terminal or a client installed on the terminal. A database can be set on the server or independently of the server to provide data storage services for the server 104. Cloud computing and / or edge computing services can be configured on the server or independently of the server to provide data computing services for the server 104.

[0048] The network may include but is not limited to at least one of the following: wired network, wireless network. The wired network may include but is not limited to at least one of the following: wide area network, metropolitan area network, local area network, and the wireless network may include but is not limited to at least one of the following: WIFI (Wireless Fidelity), Bluetooth. The terminal device 102 may be but is not limited to a PC, a mobile phone, a tablet computer, a smart air conditioner, a smart range hood, a smart refrigerator, a smart oven, a smart stove, a smart washing machine, a smart water heater, a smart washing device, a smart dishwasher, a smart projection device, a smart TV, a smart clothes drying rack, a smart curtain, a smart audio and video, a smart socket, a smart speaker, a smart fresh air device, a smart kitchen and bathroom device, a smart bathroom device, a smart sweeping robot, a smart window cleaning robot, a smart mopping robot, a smart air purification device, a smart steamer, a smart microwave oven, a smart kitchen treasure, a smart purifier, a smart water dispenser, a smart door lock, etc.

[0049] In this application, the production and research platform refers to a one-stop platform that integrates demand, iteration, code, and delivery. As an example, the production and research platform can be a ZONE platform. The platform supports multi-terminal integration of the cloud, mobile phone, vehicle, and smart hardware, and provides standardized packaged interface services.

[0050] It should be noted that the solution provided in this application can be applied not only to the ZONE platform, but also to a variety of scenarios that require displaying large amounts of data and providing a smooth user experience, such as social media dynamic display, e-commerce platforms, music and video platforms, data visualization, news information, etc.

[0051] The following specific embodiments are used to describe in detail the technical solution of the present application and how the technical solution of the present application solves the above technical problems. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. Figures 2 to 3 Describe the virtual waterfall flow method of the production and research platform of this application.

[0052] In practical applications, the execution subject of the virtual waterfall flow method of the production and research platform can be the virtual waterfall flow device of the production and research platform. There are many ways to implement the virtual waterfall flow of the production and research platform, for example, it can be implemented through a computer program, such as application software, etc.; or, for example, a chip, etc. It can also be implemented as a medium storing relevant computer programs, such as a U disk, a cloud disk, etc.; or, it can also be implemented through a physical device integrated or installed with relevant computer programs, such as a server, etc.

[0053] Figure 2 This is one of the flow charts of the virtual waterfall flow method of the production and research platform provided by this application, such as Figure 2As shown, the virtual waterfall flow method of the production and research platform includes steps 201 to 206.

[0054] Step 201: Obtain a data source, where the data source includes multiple pieces of data.

[0055] In actual applications, the data source includes multiple pieces of data, each piece of data corresponds to a card. For example, a card template is pre-set, for example, the HTML structure and CSS style of the card are designed, and which elements the card will contain are determined, such as title, picture, description, button, etc. Specifically, the data source is obtained from a server or other device, for example, the data source is obtained through AJAX request, API call, etc. After obtaining the data source, each piece of data is parsed and obtained.

[0056] Step 202: Generate a card corresponding to each piece of data according to each piece of data, and determine the index corresponding to each card.

[0057] Further, a card is generated for each piece of data. This step involves dynamic creation of HTML and DOM manipulation. Use HTML and CSS to create the basic structure of the card, which usually involves creating a div or other element and applying CSS classes to set the style. For each piece of data, dynamically create the HTML elements in the card according to the content of each data item, fill the content of the data item into the corresponding part of the card, and apply CSS styles to each newly created card to ensure that the appearance of the card meets the design requirements. Add each generated card to the DOM of the page, usually to a predefined container element.

[0058] Optionally, if the card needs to respond to user interactions, such as click events, add event listeners to the card. Optionally, add error handling logic to the card generation process to deal with data problems or errors that may occur in DOM operations. Optionally, if the amount of data is large, consider using virtual DOM, lazy loading, or batch processing to improve performance. Optionally, test the generation and display of the card to ensure that it works properly on different browsers and devices.

[0059] Step 203: Determine the initial index range of the viewport according to the initial position of the scroll bar, and render all cards corresponding to the indexes within the initial index range of the viewport into the viewport.

[0060] The viewport refers to the area visible to the user in the browser window or application interface. In this embodiment, the initial index range of the viewport is determined according to the initial position of the scroll bar, and only the content that the user currently needs to view is rendered based on the virtual waterfall flow, that is, the real rendered DOM is controlled within the viewport range displayed to the user, and other data is only stored in the memory, thereby saving the cost of operating the DOM and ensuring smooth display of the content.

[0061] Specifically, the initial index range of the viewport can be determined according to the initial position of the scroll bar. In one example, in the above step 203, the initial index range of the viewport is determined according to the initial position of the scroll bar, including: calculating the initial start index of the viewport according to the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow; calculating the bottom position of the viewport according to the height of the viewport and the initial position of the scroll bar; calculating the initial end index of the viewport according to the bottom position of the viewport, the initial start index of the viewport and the current total height of each column of the virtual waterfall flow.

[0062] In practice, the position of the scroll bar refers to the offset of the page content relative to the top of the viewport when the user scrolls down the page. In actual applications, the position of the scroll bar (vertical position) is equal to the position of the top of the viewport. When the page is just loaded, the scroll bar is at the top, the scroll bar position is 0, and the top of the viewport is also at the top of the page. As the user scrolls down the page, the position of the scroll bar increases, and the top of the viewport moves down to show more content on the page.

[0063] Specifically, starting from the first column, the current total height of each column is accumulated in sequence until the accumulated sum exceeds or equals the height value of the initial position of the scroll bar for the first time, and the last index in the accumulation process is used as the initial starting index of the viewport.

[0064] Furthermore, the height value of the initial position of the scroll bar and the height of the viewport are calculated to obtain the height value of the bottom position of the viewport. Furthermore, the current total height of each column is accumulated from the initial starting index of the viewport until the accumulated sum exceeds the height value of the bottom position of the viewport for the first time. The last index in this accumulation process is the initial end index of the viewport.

[0065] In this implementation, the initial start index and the initial end index of the viewport are calculated based on the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow, and the initial index range of the viewport is dynamically determined to avoid loading and rendering resources that are not within the user's field of view. Rendering only the cards within the viewport can significantly reduce the number of DOM operations, thereby reducing the browser's rendering burden and improving page performance.

[0066] It can be understood that after determining the initial index range of the viewport, querying and obtaining all cards corresponding to the initial index range of the viewport, and only rendering all cards corresponding to the initial index range of the viewport into the viewport can reduce the number of DOM elements that the browser needs to process, thereby reducing the use of CPU and memory and improving page performance.

[0067] Combination Figure 2 , step 204, monitoring scrolling events.

[0068] For example, the scroll event can be monitored by adding an event listener to the window object or a specific scroll container element in JavaScript.

[0069] Step 205: Determine whether a scroll event trigger is detected.

[0070] Step 206: If no scroll event is detected, the process returns to step 204.

[0071] Step 207: If a scroll event is detected, the current index range of the viewport is updated according to the current position of the scroll bar.

[0072] In actual applications, the current index range of the viewport can be calculated based on the current position of the scroll bar and the current total height of each column of the virtual waterfall. In one example, in the above step 207, the current index range of the viewport is updated based on the current position of the scroll bar, including:

[0073] According to the current position of the scroll bar and the current total height of each column of the virtual waterfall flow, the current starting index of the viewport is calculated;

[0074] Calculate the bottom position of the viewport based on the viewport height and the current position of the scroll bar;

[0075] The current end index of the viewport is calculated according to the bottom position of the viewport, the current start index of the viewport, and the current total height of each column of the virtual waterfall flow.

[0076] Specifically, the height array is traversed, starting from the first column, and the current total height of each column is accumulated in sequence until the accumulated sum exceeds or equals the height value of the current position of the scroll bar for the first time. The last index in the accumulation process is used as the current starting index of the viewport.

[0077] Furthermore, the height value of the current position of the scroll bar and the height of the viewport are calculated to obtain the height value of the bottom position of the viewport. Furthermore, the current total height of each column is accumulated from the current starting index of the viewport until the accumulated sum exceeds the height value of the bottom position of the viewport for the first time. The last index in this accumulation process is the current end index of the viewport.

[0078] In this implementation, the current starting index and the current ending index of the viewport are calculated based on the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow, and the current index range of the viewport is dynamically determined to avoid loading and rendering resources that are not within the user's field of view. Rendering only the cards within the viewport can significantly reduce the number of DOM operations, thereby reducing the rendering burden of the browser and improving page performance.

[0079] Step 208: Render all cards corresponding to the indexes within the current index range of the viewport into the viewport.

[0080] In this embodiment, the waterfall flow solves the blank space problem caused by inconsistent card heights. When the scroll event is triggered, the current index range of the viewport is updated according to the current position of the scroll bar, and the cards within the current index range of the viewport are rendered into the viewport. Only all cards between the current index range of the viewport are rendered into the viewport, which can reduce the number of DOM elements that the browser needs to process, thereby reducing the use of CPU and memory and improving the performance of the page. Furthermore, after the scroll event is triggered, the display content in the viewport is updated in real time, which improves the display performance of the page and enhances the user experience.

[0081] In actual applications, when a card scrolls out of the viewport, the virtual waterfall flow removes the corresponding DOM element from the DOM tree, leaving only the card in the viewport visible to the user in the DOM tree, which greatly reduces DOM operations and calculations, and uses a limited DOM to load unlimited data, improving fluency without causing lag or frame drops, thus improving the user experience.

[0082] In actual applications, after generating the card corresponding to each piece of data, each card needs to be added to the corresponding column of the virtual waterfall flow in turn, and the total height of each column in the virtual waterfall flow is updated in real time. On this basis, the initial index range of the viewport can be determined according to the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow.

[0083] For example, in a possible implementation manner, before the above step 203, the above method further includes:

[0084] Traverse the data source and perform adding processing on each card in turn to add all cards to the corresponding columns of the virtual waterfall flow; wherein the adding processing includes: taking the column with the smallest current total height among all columns of the virtual waterfall flow as the column to be added; adding the card to the column to be added, and updating the total height of the column to be added.

[0085] The above step 203 specifically includes:

[0086] According to the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow, the initial index range of the viewport is calculated, and all cards corresponding to the initial index range of the viewport are rendered into the viewport.

[0087] In this embodiment, the adding process is performed for each card in turn, and the card is added to the column with the smallest total height at present. It can be understood that in the virtual waterfall flow layout, adding the card to the column with the smallest total height can achieve at least the following effects: First, the layout can be balanced. By adding the card to the column with the smallest total height, it can ensure that the height growth of all columns remains relatively balanced, avoiding some columns from growing too fast while other columns are relatively low, thereby achieving a more uniform and beautiful layout. Second, it can improve space utilization. The balanced column height can maximize the use of vertical space, reduce blank areas, and improve the space utilization of the page. Third, improve the visual experience. Evenly distributed cards can provide a better visual experience and avoid visual disharmony caused by excessive differences in column height. Fourth, it can optimize performance. In the virtual waterfall flow, balancing column height helps reduce performance problems caused by DOM reflow and reflow, because the changes in DOM structure are relatively small, which can reduce the computational burden of the browser. Fifth, improve data loading efficiency. When data needs to be loaded on demand, balancing column height can trigger loading operations more evenly, avoiding the need to load more data too early in some columns.

[0088] In actual applications, each time a card is added to a corresponding column, the total height of the column needs to be updated. For example, an array or other data structure can be pre-set to store the total height of each column of the virtual waterfall flow. Specifically, when a card needs to be inserted, the column with the smallest total height is determined according to the total height of each column stored in the array or other data structure, as the column to be added, the card is added to the column to be added, and the total height of the column to be added stored in the array or other data structure is updated.

[0089] Furthermore, the initial index range of the viewport can be determined based on the initial position of the scroll bar and the current total height of each column of the virtual waterfall. In one example, the initial starting index of the viewport is calculated based on the initial position of the scroll bar and the current total height of each column of the virtual waterfall; the bottom position of the viewport is calculated based on the height of the viewport and the initial position of the scroll bar; the initial ending index of the viewport is calculated based on the bottom position of the viewport, the initial starting index of the viewport, and the current total height of each column of the virtual waterfall. Based on the initial starting index of the viewport and the initial ending index of the viewport, the initial index range of the viewport can be determined. Furthermore, all cards corresponding to the initial index range of the viewport are rendered into the viewport.

[0090] In combination with the above description, an array or other data structure may be pre-set to store the total height of each column of the virtual waterfall flow. Optionally, in a possible implementation, after the above step 202, the above method further includes:

[0091] Create a height array, the length of which is consistent with the number of columns of the virtual waterfall flow, and the height array is used to store the total height of each column of the virtual waterfall flow.

[0092] In the above, the column with the smallest total height among all the columns of the virtual waterfall flow is used as the column to be added, including:

[0093] The height array is traversed, and the column corresponding to the minimum total height stored in the height array is used as the column to be added.

[0094] The above updates the total height of the columns to be added, including:

[0095] The height of the card is added to the current total height of the column to be added, and the total height of the column to be added stored in the height array is updated.

[0096] In actual applications, a height array is created to set the initial total height of each column of the virtual waterfall flow to 0. On this basis, as cards are added to the corresponding columns, the current total height of each column is updated.

[0097] In this embodiment, a height array is created in advance to store the total height of each column of the virtual waterfall flow. When a card needs to be inserted, the column with the smallest total height is determined according to the total height of each column stored in the height array as the column to be added, the card is added to the column to be added, and the total height of the column to be added stored in the height array is updated, thereby realizing intelligent management of the virtual waterfall flow and improving the accuracy of the virtual waterfall flow.

[0098] In addition, in actual applications, the layout of the virtual waterfall needs to be set according to specific display requirements. Specifically, the layout of the virtual waterfall includes but is not limited to: the width of the viewport, the height of the viewport, the width of each column of the virtual waterfall, and the number of columns of the virtual waterfall.

[0099] As an example, in one possible implementation, Figure 3 This is the second flow chart of the virtual waterfall flow method of the production and research platform provided by this application, such as Figure 3 As shown, before the above step 201, the above method also includes: step 301 and step 303.

[0100] Step 301: Set the width of the viewport, the height of the viewport, and the width of each column of the virtual waterfall flow according to display requirements.

[0101] Step 302: Calculate the number of columns of the virtual waterfall flow according to the width of the viewport and the width of each column of the virtual waterfall flow.

[0102] Among them, virtual waterfall flow is a list rendering technology that improves the efficiency of massive data presentation and interaction by only rendering the list items in the current visible area. Specifically, virtual waterfall flow only renders the list items in the current visible area to meet performance challenges, while temporarily hiding or delaying the rendering of other list items. As users scroll through the list, new list items will be dynamically loaded and rendered, creating a smooth and seamless experience.

[0103] Specifically, in the layout of the virtual waterfall flow, the width of the viewport refers to the width of the area in the browser window or application interface that can be used to display content. For example, setting the width of the viewport to 100% means that the width of the viewport is set to be the same as the width of the parent container or the entire screen.

[0104] Specifically, the height of the viewport refers to the size of the vertical area in the browser window used to display the web page content. This height is the height of the web page area that the user can see at a glance without scrolling the page. For example, the height of the viewport is set to 500px.

[0105] Specifically, in a waterfall layout, content is usually divided into multiple columns, and each column can have a different width. The width of each column of the virtual waterfall is used to calculate the parameters of how many columns can be accommodated in the waterfall. For example, if the width of the viewport is 1000px and the width of each column is 250px, then the number of columns in the virtual waterfall is 4.

[0106] In addition, in a possible implementation manner, the above method further includes:

[0107] Removes cards outside the current index range of the viewport.

[0108] In practical applications, DOM (Document Object Model) operation refers to the process of operating the document structure of a web page through programming methods (such as JavaScript). DOM is a programming interface for HTML and XML documents, which provides a way to represent and operate the content, structure and style of documents. DOM operations include querying elements, creating elements, deleting elements, modifying element content, modifying element attributes, modifying element style, inserting and replacing nodes, etc.

[0109] DOM operations are a very basic and important part of front-end development, allowing developers to create dynamic, interactive web pages. However, DOM operations may also affect the performance of the web page, especially when frequent DOM updates are involved, because each DOM operation may cause the browser to re-render part or all of the page, which may cause performance bottlenecks. Therefore, optimizing DOM operations is one of the keys to improving web page performance.

[0110] In this application, when the card scrolls out of the viewport, the virtual waterfall flow removes the corresponding DOM element from the DOM tree, and only leaves the card in the viewport visible to the user in the DOM tree, which greatly reduces the DOM operation and calculation, and realizes the loading of unlimited data with limited DOM, improves the fluency, does not cause freezes and frame drops, and improves the user experience.

[0111] In the virtual waterfall method of the production and research platform provided in this embodiment, a card corresponding to each piece of data is generated, and the index corresponding to each card is determined; according to the initial position of the scroll bar, the initial index range of the viewport is determined, and all cards corresponding to the initial index range of the viewport are rendered into the viewport; if a scroll event is triggered, the current index range of the viewport is updated according to the current position of the scroll bar; all cards corresponding to the current index range of the viewport are rendered into the viewport. The scheme of this embodiment realizes the display of data based on a virtual waterfall flow. The virtual waterfall flow ensures that during the scrolling of the waterfall flow, the real rendered DOM is controlled within the viewport range displayed to the user, and other data is only stored in the memory. Especially when the amount of data is large, the cost of operating the DOM is saved, smooth display is achieved, and display performance is improved.

[0112] The virtual waterfall flow device of the production and research platform provided in this application is described below. The virtual waterfall flow device of the production and research platform described below and the virtual waterfall flow method of the production and research platform described above can be referenced to each other.

[0113] Figure 4 is a structural diagram of the virtual waterfall flow device of the production and research platform provided by this application, such as Figure 4 As shown, the virtual waterfall flow device of the above-mentioned production and research platform includes: an acquisition module 41, a generation module 42, a processing module 43, and a monitoring module 44.

[0114] The acquisition module 41 is used to acquire a data source, which includes multiple pieces of data.

[0115] In actual applications, the data source includes multiple pieces of data, each piece of data corresponds to a card. For example, a card template is pre-set, for example, the HTML structure and CSS style of the card are designed, and which elements the card will contain are determined, such as title, picture, description, button, etc. Specifically, the data source is obtained from a server or other device, for example, the data source is obtained through AJAX request, API call, etc. After obtaining the data source, each piece of data is parsed and obtained.

[0116] The generating module 42 is used to generate a card corresponding to each piece of data according to each piece of data, and determine the index corresponding to each card.

[0117] Further, a card is generated for each piece of data. This step involves dynamic creation of HTML and DOM manipulation. Use HTML and CSS to create the basic structure of the card, which usually involves creating a div or other element and applying CSS classes to set the style. For each piece of data, dynamically create the HTML elements in the card according to the content of each data item, fill the content of the data item into the corresponding part of the card, and apply CSS styles to each newly created card to ensure that the appearance of the card meets the design requirements. Add each generated card to the DOM of the page, usually to a predefined container element.

[0118] Optionally, if the card needs to respond to user interactions, such as click events, add event listeners to the card. Optionally, add error handling logic to the card generation process to deal with data problems or errors that may occur in DOM operations. Optionally, if the amount of data is large, consider using virtual DOM, lazy loading, or batch processing to improve performance. Optionally, test the generation and display of the card to ensure that it works properly on different browsers and devices.

[0119] The processing module 43 is used to determine the initial index range of the viewport according to the initial position of the scroll bar, and render all cards corresponding to the indexes within the initial index range of the viewport into the viewport.

[0120] The viewport refers to the area visible to the user in the browser window or application interface. In this embodiment, the initial index range of the viewport is determined according to the initial position of the scroll bar, and only the content that the user currently needs to view is rendered based on the virtual waterfall flow, that is, the real rendered DOM is controlled within the viewport range displayed to the user, and other data is only stored in the memory, thereby saving the cost of operating the DOM and ensuring smooth display of the content.

[0121] Specifically, the initial index range of the viewport can be determined according to the initial position of the scroll bar. In one example, when the processing module 43 is used to determine the initial index range of the viewport according to the initial position of the scroll bar, it is specifically used to: calculate the initial start index of the viewport according to the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow; calculate the bottom position of the viewport according to the height of the viewport and the initial position of the scroll bar; calculate the initial end index of the viewport according to the bottom position of the viewport, the initial start index of the viewport and the current total height of each column of the virtual waterfall flow.

[0122] In practice, the position of the scroll bar refers to the offset of the page content relative to the top of the viewport when the user scrolls down the page. In actual applications, the position of the scroll bar (vertical position) is equal to the position of the top of the viewport. When the page is just loaded, the scroll bar is at the top, the scroll bar position is 0, and the top of the viewport is also at the top of the page. As the user scrolls down the page, the position of the scroll bar increases, and the top of the viewport moves down to show more content on the page.

[0123] Specifically, starting from the first column, the current total height of each column is accumulated in sequence until the accumulated sum exceeds or equals the height value of the initial position of the scroll bar for the first time, and the last index in the accumulation process is used as the initial starting index of the viewport.

[0124] Furthermore, the height value of the initial position of the scroll bar and the height of the viewport are calculated to obtain the height value of the bottom position of the viewport. Furthermore, the current total height of each column is accumulated from the initial starting index of the viewport until the accumulated sum exceeds the height value of the bottom position of the viewport for the first time. The last index in this accumulation process is the initial end index of the viewport.

[0125] In this implementation, the initial start index and the initial end index of the viewport are calculated based on the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow, and the initial index range of the viewport is dynamically determined to avoid loading and rendering resources that are not within the user's field of view. Rendering only the cards within the viewport can significantly reduce the number of DOM operations, thereby reducing the browser's rendering burden and improving page performance.

[0126] It can be understood that after determining the initial index range of the viewport, querying and obtaining all cards corresponding to the initial index range of the viewport, and only rendering all cards corresponding to the initial index range of the viewport into the viewport can reduce the number of DOM elements that the browser needs to process, thereby reducing the use of CPU and memory and improving page performance.

[0127] Combination Figure 4The above-mentioned monitoring module 44 is used to update the current index range of the viewport according to the current position of the scroll bar if a scroll event is triggered, and render all cards corresponding to the indexes within the current index range of the viewport into the viewport.

[0128] For example, the scroll event can be monitored by adding an event listener to the window object or a specific scroll container element in JavaScript.

[0129] In actual applications, the current index range of the viewport can be calculated based on the current position of the scroll bar and the current total height of each column of the virtual waterfall. In one example, the above-mentioned monitoring module 44 is used to update the current index range of the viewport according to the current position of the scroll bar, specifically for:

[0130] According to the current position of the scroll bar and the current total height of each column of the virtual waterfall flow, the current starting index of the viewport is calculated;

[0131] Calculate the bottom position of the viewport based on the viewport height and the current position of the scroll bar;

[0132] The current end index of the viewport is calculated according to the bottom position of the viewport, the current start index of the viewport, and the current total height of each column of the virtual waterfall flow.

[0133] Specifically, the height array is traversed, starting from the first column, and the current total height of each column is accumulated in sequence until the accumulated sum exceeds or equals the height value of the current position of the scroll bar for the first time. The last index in the accumulation process is used as the current starting index of the viewport.

[0134] Furthermore, the height value of the current position of the scroll bar and the height of the viewport are calculated to obtain the height value of the bottom position of the viewport. Furthermore, the current total height of each column is accumulated from the current starting index of the viewport until the accumulated sum exceeds the height value of the bottom position of the viewport for the first time. The last index in this accumulation process is the current end index of the viewport.

[0135] In this implementation, the current starting index and the current ending index of the viewport are calculated based on the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow, and the current index range of the viewport is dynamically determined to avoid loading and rendering resources that are not within the user's field of view. Rendering only the cards within the viewport can significantly reduce the number of DOM operations, thereby reducing the rendering burden of the browser and improving page performance.

[0136] In this embodiment, the waterfall flow solves the blank space problem caused by inconsistent card heights. When the scroll event is triggered, the current index range of the viewport is updated according to the current position of the scroll bar, and the cards within the current index range of the viewport are rendered into the viewport. Only all cards between the current index range of the viewport are rendered into the viewport, which can reduce the number of DOM elements that the browser needs to process, thereby reducing the use of CPU and memory and improving the performance of the page. Furthermore, after the scroll event is triggered, the display content in the viewport is updated in real time, which improves the display performance of the page and enhances the user experience.

[0137] In actual applications, when a card scrolls out of the viewport, the virtual waterfall flow removes the corresponding DOM element from the DOM tree, leaving only the card in the viewport visible to the user in the DOM tree, which greatly reduces DOM operations and calculations, and uses a limited DOM to load unlimited data, improving fluency without causing lag or frame drops, thus improving the user experience.

[0138] In actual applications, after generating the card corresponding to each piece of data, each card needs to be added to the corresponding column of the virtual waterfall flow in turn, and the total height of each column in the virtual waterfall flow is updated in real time. On this basis, the initial index range of the viewport can be determined according to the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow.

[0139] For example, in a possible implementation manner, the above device further includes:

[0140] The adding module is used to traverse the data source and perform adding processing on each card in turn to add all cards to the corresponding columns of the virtual waterfall flow; wherein the adding processing includes: taking the column with the smallest current total height among all columns of the virtual waterfall flow as the column to be added; adding the card to the column to be added, and updating the total height of the column to be added.

[0141] The processing module 43 is specifically used for:

[0142] According to the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow, the initial index range of the viewport is calculated, and all cards corresponding to the initial index range of the viewport are rendered into the viewport.

[0143] In this embodiment, the adding process is performed for each card in turn, and the card is added to the column with the smallest total height at present. It can be understood that in the virtual waterfall flow layout, adding the card to the column with the smallest total height can achieve at least the following effects: First, the layout can be balanced. By adding the card to the column with the smallest total height, it can ensure that the height growth of all columns remains relatively balanced, avoiding some columns from growing too fast while other columns are relatively low, thereby achieving a more uniform and beautiful layout. Second, it can improve space utilization. The balanced column height can maximize the use of vertical space, reduce blank areas, and improve the space utilization of the page. Third, improve the visual experience. Evenly distributed cards can provide a better visual experience and avoid visual disharmony caused by excessive differences in column height. Fourth, it can optimize performance. In the virtual waterfall flow, balancing column height helps reduce performance problems caused by DOM reflow and reflow, because the changes in DOM structure are relatively small, which can reduce the computational burden of the browser. Fifth, improve data loading efficiency. When data needs to be loaded on demand, balancing column height can trigger loading operations more evenly, avoiding the need to load more data too early in some columns.

[0144] In actual applications, each time a card is added to a corresponding column, the total height of the column needs to be updated. For example, an array or other data structure can be pre-set to store the total height of each column of the virtual waterfall flow. Specifically, when a card needs to be inserted, the column with the smallest total height is determined according to the total height of each column stored in the array or other data structure, as the column to be added, the card is added to the column to be added, and the total height of the column to be added stored in the array or other data structure is updated.

[0145] Furthermore, the initial index range of the viewport can be determined based on the initial position of the scroll bar and the current total height of each column of the virtual waterfall. In one example, the initial starting index of the viewport is calculated based on the initial position of the scroll bar and the current total height of each column of the virtual waterfall; the bottom position of the viewport is calculated based on the height of the viewport and the initial position of the scroll bar; the initial ending index of the viewport is calculated based on the bottom position of the viewport, the initial starting index of the viewport, and the current total height of each column of the virtual waterfall. Based on the initial starting index of the viewport and the initial ending index of the viewport, the initial index range of the viewport can be determined. Furthermore, all cards corresponding to the initial index range of the viewport are rendered into the viewport.

[0146] In combination with the above description, an array or other data structure may be pre-set to store the total height of each column of the virtual waterfall flow. Optionally, in a possible implementation, the above device further includes:

[0147] Create a module for creating a height array. The length of the height array is consistent with the number of columns of the virtual waterfall flow. The height array is used to store the total height of each column of the virtual waterfall flow.

[0148] When the above adding module is used to select the column with the smallest total height among all the columns of the virtual waterfall flow as the column to be added, it is specifically used for:

[0149] The height array is traversed, and the column corresponding to the minimum total height stored in the height array is used as the column to be added.

[0150] When the above adding module is used to update the total height of the column to be added, it is specifically used for:

[0151] The height of the card is added to the current total height of the column to be added, and the total height of the column to be added stored in the height array is updated.

[0152] In actual applications, a height array is created to set the initial total height of each column of the virtual waterfall flow to 0. On this basis, as cards are added to the corresponding columns, the current total height of each column is updated.

[0153] In this embodiment, a height array is created in advance to store the total height of each column of the virtual waterfall flow. When a card needs to be inserted, the column with the smallest total height is determined according to the total height of each column stored in the height array as the column to be added, the card is added to the column to be added, and the total height of the column to be added stored in the height array is updated, thereby realizing intelligent management of the virtual waterfall flow and improving the accuracy of the virtual waterfall flow.

[0154] In addition, in actual applications, the layout of the virtual waterfall needs to be set according to specific display requirements. Specifically, the layout of the virtual waterfall includes but is not limited to: the width of the viewport, the height of the viewport, the width of each column of the virtual waterfall, and the number of columns of the virtual waterfall.

[0155] As an example, in a possible implementation manner, the above device further includes: a setting module, configured to:

[0156] According to display requirements, set the viewport width, viewport height, and the width of each column of the virtual waterfall flow;

[0157] The number of columns of the virtual waterfall flow is calculated according to the width of the viewport and the width of each column of the virtual waterfall flow.

[0158] Among them, virtual waterfall flow is a list rendering technology that improves the efficiency of massive data presentation and interaction by only rendering the list items in the current visible area. Specifically, virtual waterfall flow only renders the list items in the current visible area to meet performance challenges, while temporarily hiding or delaying the rendering of other list items. As users scroll through the list, new list items will be dynamically loaded and rendered, creating a smooth and seamless experience.

[0159] Specifically, in the layout of the virtual waterfall flow, the width of the viewport refers to the width of the area in the browser window or application interface that can be used to display content. For example, setting the width of the viewport to 100% means that the width of the viewport is set to be the same as the width of the parent container or the entire screen.

[0160] Specifically, the height of the viewport refers to the size of the vertical area in the browser window used to display the web page content. This height is the height of the web page area that the user can see at a glance without scrolling the page. For example, the height of the viewport is set to 500px.

[0161] Specifically, in a waterfall layout, content is usually divided into multiple columns, and each column can have a different width. The width of each column of the virtual waterfall is used to calculate the parameters of how many columns can be accommodated in the waterfall. For example, if the width of the viewport is 1000px and the width of each column is 250px, then the number of columns in the virtual waterfall is 4.

[0162] In addition, in a possible implementation manner, the above device further includes:

[0163] Remove module, used to remove cards outside the current index range of the viewport.

[0164] In practical applications, DOM (Document Object Model) operation refers to the process of operating the document structure of a web page through programming methods (such as JavaScript). DOM is a programming interface for HTML and XML documents, which provides a way to represent and operate the content, structure and style of documents. DOM operations include querying elements, creating elements, deleting elements, modifying element content, modifying element attributes, modifying element style, inserting and replacing nodes, etc.

[0165] DOM operations are a very basic and important part of front-end development, allowing developers to create dynamic, interactive web pages. However, DOM operations may also affect the performance of the web page, especially when frequent DOM updates are involved, because each DOM operation may cause the browser to re-render part or all of the page, which may cause performance bottlenecks. Therefore, optimizing DOM operations is one of the keys to improving web page performance.

[0166] In this application, when the card scrolls out of the viewport, the virtual waterfall flow removes the corresponding DOM element from the DOM tree, and only leaves the card in the viewport visible to the user in the DOM tree, which greatly reduces the DOM operation and calculation, and realizes the loading of unlimited data with limited DOM, improves the fluency, does not cause freezes and frame drops, and improves the user experience.

[0167] In the virtual waterfall flow device of the production and research platform provided by this embodiment, a card corresponding to each piece of data is generated, and the index corresponding to each card is determined; according to the initial position of the scroll bar, the initial index range of the viewport is determined, and all cards corresponding to the initial index range of the viewport are rendered into the viewport; if a scroll event is triggered, the current index range of the viewport is updated according to the current position of the scroll bar; all cards corresponding to the current index range of the viewport are rendered into the viewport. The scheme of this embodiment realizes the display of data based on a virtual waterfall flow. The virtual waterfall flow ensures that during the scrolling of the waterfall flow, the real rendered DOM is controlled within the viewport range displayed to the user, and other data is only stored in the memory. Especially when the amount of data is large, the cost of operating the DOM is saved, smooth display is achieved, and the display performance is improved.

[0168] Figure 5 is a schematic diagram of the structure of the electronic device provided by the present application, such as Figure 5 As shown, the electronic device may include: a processor 510, a communication interface 520, a memory 530 and a communication bus 540, wherein the processor 510, the communication interface 520 and the memory 530 communicate with each other through the communication bus 540. The processor 510 may call the logic instructions in the memory 530 to execute the virtual waterfall method of the production and research platform, which includes: obtaining a data source, the data source includes multiple data; generating a card corresponding to each data according to each data, and determining the index corresponding to each card; determining the initial index range of the viewport according to the initial position of the scroll bar, and rendering all cards corresponding to the index within the initial index range of the viewport into the viewport; if a scroll event is triggered, updating the current index range of the viewport according to the current position of the scroll bar, and rendering all cards corresponding to the index within the current index range of the viewport into the viewport.

[0169] In addition, the logic instructions in the above-mentioned memory 530 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on this understanding, the technical solution of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art, and the computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0170] On the other hand, the present application also provides a computer program product, which includes a computer program stored on a computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer can execute the virtual waterfall flow method of the production and research platform provided by the above-mentioned methods, and the method includes: obtaining a data source, the data source includes multiple data; generating a card corresponding to each data according to each data, and determining the index corresponding to each card; determining the initial index range of the viewport according to the initial position of the scroll bar, and rendering all cards corresponding to the indexes within the initial index range of the viewport into the viewport; if a scroll event is triggered, updating the current index range of the viewport according to the current position of the scroll bar, and rendering all cards corresponding to the indexes within the current index range of the viewport into the viewport.

[0171] On the other hand, the present application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to execute the virtual waterfall flow method of the above-mentioned production and research platforms, the method comprising: obtaining a data source, the data source comprising multiple data; generating a card corresponding to each data according to each data, and determining the index corresponding to each card; determining the initial index range of the viewport according to the initial position of the scroll bar, and rendering all cards corresponding to the indexes within the initial index range of the viewport into the viewport; if a scroll event is triggered, updating the current index range of the viewport according to the current position of the scroll bar, and rendering all cards corresponding to the indexes within the current index range of the viewport into the viewport.

[0172] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0173] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0174] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A virtual waterfall flow method for a production and research platform, characterized in that: The method comprises: Acquire a data source, where the data source includes multiple pieces of data; Generate a card corresponding to each piece of data and determine the index corresponding to each card; Determine the initial index range of the viewport according to the initial position of the scroll bar, and render all cards corresponding to the indexes within the initial index range of the viewport into the viewport; If a scroll event is detected, the current index range of the viewport is updated according to the current position of the scroll bar, and all cards corresponding to the indexes within the current index range of the viewport are rendered into the viewport.

2. The virtual waterfall flow method of the production and research platform according to claim 1 is characterized in that: Before obtaining the data source, the method further includes: According to display requirements, set the viewport width, viewport height, and the width of each column of the virtual waterfall flow; The number of columns of the virtual waterfall flow is calculated according to the width of the viewport and the width of each column of the virtual waterfall flow.

3. The virtual waterfall flow method of the production and research platform according to claim 2 is characterized in that: Before determining the initial index range of the viewport according to the initial position of the scroll bar, the method further includes: Traversing the data source, performing adding processing on each card in turn, and realizing adding all cards to the corresponding columns of the virtual waterfall flow; wherein the adding processing includes: taking the column with the smallest current total height among all the columns of the virtual waterfall flow as the column to be added; adding the card to the column to be added, and updating the total height of the column to be added; Determining the initial index range of the viewport according to the initial position of the scroll bar includes: The current index range of the viewport is calculated according to the initial position of the scroll bar and the current total height of each column of the virtual waterfall flow.

4. The virtual waterfall flow method of the production and research platform according to claim 3 is characterized in that: After generating a card corresponding to each piece of data according to each piece of data and determining an index corresponding to each card, the method further includes: Create a height array, the length of the height array is consistent with the number of columns of the virtual waterfall flow, and the height array is used to store the total height of each column of the virtual waterfall flow; The method of taking the column with the smallest total height among all the columns of the virtual waterfall flow as the column to be added specifically includes: Traversing the height array, and taking the column corresponding to the minimum total height stored in the height array as the column to be added; The updating of the total height of the to-be-added column specifically includes: The height of the card and the current total height of the column to be added are cumulatively calculated, and the total height of the column to be added stored in the height array is updated.

5. The virtual waterfall flow method of the production and research platform according to claim 3 is characterized in that: The updating of the current index range of the viewport according to the current position of the scroll bar includes: Calculate the current start index of the viewport according to the current position of the scroll bar and the current total height of each column of the virtual waterfall flow; Calculate the bottom position of the viewport according to the height of the viewport and the current position of the scroll bar; The current end index of the viewport is calculated according to the bottom position of the viewport, the current start index of the viewport, and the current total height of each column of the virtual waterfall flow.

6. The virtual waterfall flow method of the production and research platform according to any one of claims 1 to 5, characterized in that: The method further comprises: Removes cards outside the current index range of the viewport.

7. A virtual waterfall flow device for a production and research platform, characterized in that: The device comprises: An acquisition module, used to acquire a data source, wherein the data source includes multiple pieces of data; A generation module is used to generate a card corresponding to each piece of data according to each piece of data, and determine the index corresponding to each card; A processing module, used to determine an initial index range of the viewport according to an initial position of the scroll bar, and render all cards corresponding to indexes within the initial index range of the viewport into the viewport; The monitoring module is used to update the current index range of the viewport according to the current position of the scroll bar if a scroll event is triggered, and render all cards corresponding to the indexes within the current index range of the viewport into the viewport.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the virtual waterfall flow method of the production and research platform as described in any one of claims 1 to 6 are implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the virtual waterfall flow method of the production and research platform as described in any one of claims 1 to 6 are implemented.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the virtual waterfall flow method of the production and research platform as described in any one of claims 1 to 6 are implemented.

Images