Example Analysis of JS waterfall stream implementation method and js instance analysis

Example Analysis of JS waterfall stream implementation method and js instance analysis

This article analyzes the JS waterfall stream implementation method. We will share this with you for your reference. The details are as follows:

Description:

1. The width and height of each image are the same.

Ideas:

1. Calculate a total of several columns (based on the total width of the window/the width of a single image)

2. Based on the total number of columns * the width of a single image, set the total width of the peripheral and center horizontally (Note: The width should be calculated, rather than fixed, because the window size will change)

3. Fill the first line of Image Height in the array in order

4. calculate the shortest height in the first line, add the first image in the second line to it (absolute positioning), add the first image in the second line, and update its height, then recalculate the shortest and start the previous process.

5. Move the mouse over the scroll wheel to continue loading the new image)

Window. onload = function () {waterfall ('main', 'pin'); var dataInt = {'data': [{'src': '1.jpg '}, {'src ': '2.jpg '}, {'src': '3.jpg'}, {'src': '4.jpg '}]}; window. onscroll = function () {if (checkscrollside () {var oParent = document. getElementById ('main'); // parent object for (var I = 0; I <dataInt. data. length; I ++) {var oPin = document. createElement ('div '); // Add an element node oPin. className = 'pin'; // Add the class name attribute oParent. appendChild (oPin); // Add Add the subnode var oBox = document. createElement ('div '); oBox. className = 'box'; oPin. appendChild (oBox); var oImg = document. createElement ('img '); oImg. src = '. /images/'+ dataInt. data [I]. src; oBox. appendChild (oImg);} waterfall ('main', 'pin') ;}}/ * parend parent-level idpin element id */function waterfall (parent, pin) {var oParent = document. getElementById (parent); // parent object var aPin = getClassObj (oParent, pin); // obtain the array aPin var iPinW of the pin of the storage block box = APin [0]. offsetWidth; // The width var num1_math.floor(document.doc umentElement. clientWidth/iPinW); // Number of pins that can be accommodated in each row [window width divided by the width of a block] oParent.style.css Text = 'width: '+ iPinW * num + 'px; margin: 0 auto; '; // set the parent center style: fixed width + automatic horizontal margin var pinHArr = []; // used to store the height of all block boxes in each column. For (var I = 0; I <aPin. length; I ++) {// traverses each block box element var pinH = aPin [I] of the array aPin. offsetHeight; if (I <num) {pinHArr [I] = pinH; // Add the num block box pin in the first line to the array pinHArr} else {var minH = Math. min. apply (null, pinHArr); // the minimum value of minH var minHIndex = getminHIndex (pinHArr, minH) in the array pinHArr; aPin [I]. style. position = 'absolute '; // sets the absolute displacement aPin [I]. style. top = minH + 'px '; aPin [I]. style. left = aPin [minHIndex]. offsetLeft + 'px '; // The height of the minimum array height element + the height of the added aPin [I] block box PinHArr [minHIndex] + = aPin [I]. offsetHeight; // update the column height after the block box is added. }}/ ***** use the class of the Parent and Child element to obtain the array of the child element of the same type */function getClassObj (parent, className) {var obj = parent. getElementsByTagName ('*'); // obtain all subsets of the parent Level var pinS = []; // create an array to collect sub-elements for (var I = 0; I <obj. length; I ++) {// traverse sub-elements, determine the category, and press in the array if (obj [I]. className = className) {pinS. push (obj [I]) ;}}; return pinS ;}/ ***** retrieve the index of the minimum pin height */function getminHIndex (arr, minH ){ For (var I in arr) {if (arr [I] = minH) {return I ;}} function checkscrollside () {var oParent = document. getElementById ('main'); var aPin = getClassObj (oParent, 'pin'); var lastPinH = aPin [aPin. length-1]. offsetTop + Math. floor (aPin [aPin. length-1]. offsetHeight/2); // create the height of the waterfall () function that triggers the Add block box function: the last block frame is half the distance from the top of the page + the height of the page (loading starts when the page is not rolled to the end) var scrollTop=document.doc umentElement. scrollTop | document. body. scrollTop; // fix the compatibility va R export enth1_document.doc umentElement. clientHeight; // return (lastPinH <scrollTop + export enth )? True: false; // return true when the specified height is reached, triggering the waterfall () function}