Shulou(Shulou.com)05/31 Report--

Web front-end waterfall flow algorithm analysis and code implementation, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Waterfall flow effect is widely used, such as petals, Sina Qingbo, Mogujie, Meili and many other websites. There are also many previous frameworks that support this effect. Today, we have learned how to achieve this effect. We do not rely on plug-ins and analyze the implementation process by ourselves. In order to make a clear description, some terms in the analysis have been drawn up by ourselves, and we can forgive you for any irregularities.

Train of thought analysis

Step 1: build a row of elements + find the additional location of the new elements

The width of all the elements of the waterfall flow is fixed, and we divide the width of the browser by the width of each waterfall flow, which is the number of waterfall flow blocks that can be contained in each line. Because the height of each waterfall flow block is different, let's call this group of elements that make up a row as row elements. after the row elements have been placed, if we want to add another element, then its location should be found like this?

"get the element with the lowest height in the collection of row elements, the top value of the element to be placed should be the height of the lowest element, and the left value should be the height of the lowest element."

In this way, we find the location of this new element. In this way, the lowest height value in the row element becomes the original height + the height of the new element.

Step 2: repeat step 1, depending on the row elements to append new elements

In step 1, we have implemented appending a new element to the row element at a time, so that when the new element is added, we build a new row element, and then the operation is to append the new element to the new row element, the principle is the same as step one.

Step 3: implement scrolling position monitoring and load data at the bottom

Code implementation

Achieve the effect described in step 1:

Implement the code waterfall flow effect implement _ window.onload=function () {/ / get the parent object var oParent = document.getElementById ("main"); / / get all the child elements under the parent [first parameter] [match according to the second parameter] var aPin = getClassObject (oParent, "pin") / / get the width of each block var iPinW = aPin [0] .offsetWidth; / / calculate the width of the pin (waterfall flow block) page / width of each waterfall flow block var num = Math.floor (document.documentElement.clientWidth/iPinW) / / resets the parent style to ensure that the image is centered as a whole oParent.style.cssText= "width:" + num*iPinW + "px;margin:0 auto;"; var compareArray = []; / / presses the height of an entire row of waterfall blocks into an array for (var I = 0; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.