Analyzing waterfall flow layout: JS absolute positioning implementation

Waterfall layout with absolute positioning:

1. Layout

1. Container surrounding the block box:

Copy the code The code is as follows:

... ...

2. A block box:

Copy code The code is as follows:

div>

3. Initialize the first row/5 block boxes:

Copy code The code is as follows: .pin{

padding: 15px 0 0 15px;

 float: left;}
 .box{
 padding: 10px ;
 border:1px solid #ccc;}
 .box img{
 width:192px;
 height:auto;}



Effect: 

2. Ideas:

1. Set the style of the parent main: horizontally centered. 2. Set the style of each block box pin: absolute positioning.

3. Set the listening function for the window scroll event: read the data and add a block box.

JS implementation:

1-①: Get the parent oParent: 1-②: Create the function getClassObj() - get the array containing the block box through the parent id and block box class name.

Copy code The code is as follows: var oParent=document.getElementById('main'); // Parent object

var aPin=getClassObj(oParent,pin);// Get the array of storage block box pin aPin

var num=Math.floor(document.documentElement.clientWidth/aPin[0].offsetWidth ); // Get - the number of block boxes that can be accommodated in each line - num [window width divided by the width of a block box]

oParent.style.cssText='width:' iPinW*num 'px;margin:0 auto;';//Use the cssText attribute to add a centered style to the parent main: fixed-width automatic horizontal margins

Copy code The code is as follows:function getClassObj(parent,className){

var obj=parent.getElementsByTagName('*');//Get all subsets of the parent

 var pinS=[];//Create an array to store elements with className 
 for (var i =0;i                                                                                                                                                                                                                     ]);
      };
                      return pinS;} block box aPin[i], assign the first num block boxes to the array pinHArr, and absolutely position the block boxes that exceed the number num of block boxes that can be accommodated in one line. 
　2-③: Use the creation function getminHIndex() to return the minimum value in an array 

Copy the code

The code is as follows:

var pinHArr=[];//Used to store the combined height of all block boxes in each column [The length of this array also changes with the number of columns] 
 for(var i=0;i        var pinH=aPin[i].offsetHeight;//Get the visibility of the i-th block box of the array aPin Width offsetHeight
 if(i pinHArr[i]=pinH; //The num block boxes aPin in the first line are first added to the array pinHArr
 }else{
 var minH=Math.min.apply(null,pinHArr);//Calculate the minimum value minH
 in the array pinHArr var minHIndex=getminHIndex(pinHArr,minH);//Get the minimum value minH through the created getminHIndex()- Index minHIndex
 in the array pinHArr aPin[i].style.position='absolute';//Set the absolute displacement 
 aPin[i].style.top=minH 'px';
 aPin[ i] .style.left = apin [minhindex] .ofSetLeft 'px'; // The Apin [i] block of the minimum high element in the array of the array 
 Pinharr [minhindex] = apin [i]. //Update the column height after adding the block box The code is as follows: 


 function getminHIndex(arr,minH){

for(var i in arr){
if(arr[i]==minH)return i;

} } 3: Set the listening function for the window scroll event: read the data and add a block box.

Copy code

 The code is as follows:

var dataInt={'data':[{'src ':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g ( 4).jpg'}]};//A temporary data object
//Define the window scroll event listening function below
window.onscroll=function(){

if(checkscrollside()){ var oParent=document.getElementById('main');// Parent object for(var i=0;i var oPin=document.createElement( 'div'); // Create the addition of the element node Pin Opin.className = 'Pin'; // Add the class name name attribute Oparent.appendchild (opin); var oBox=document.createElement('div'); oBox.className='box';

oPin.appendChild(oBox); Create and add child node img

oImg.src='./images/' dataInt.data[i].src;
oBox.appendChild(oImg);
waterfall('main', 'pin');//Encapsulate ①② into the function waterfall(), and add and position the added node to the document.
};

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 [triggering the added block box function waterfall()]: the distance of the last block box from the top of the web page itself Half of the height (enables loading before scrolling to the bottom)
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//Pay attention to solving compatibility
 var documentH=document.documentElement.clientHeight;/ /Window height
 return (lastPinH }

3. Final effect:

4. Summary: This is to let you sort out your thoughts. The expression is not very careful and coherent, and is for reference only.

5. Completed html file and js file:

html: index.html

Copy code The code is as follows:

js：waterfall.js 1 window.onload=function(){

复制代码代码如下:

waterfall('main','pin');
 var dataInt={'data':[{'src':'g (1).jpg'},{'src':' g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};

 window.onscroll = Function () {
 if (CheckscrollSide ()) {
 var oparent = document.GetelementByid ('Main'); // The parent -level object 
 for (var I = 0; data; datait.data .length;i ){
 var oPin=document.createElement('div'); //Add element node
 .appendChild (oPin);                                                                          🎜> var oImg =document.createElement('img');
 oImg.src='./images/' dataInt.data[i].src;
 oBox.appendChild(oImg);
 }
 waterfall ('main','pin');
 };
 }

 }
 /*
 parend parent id
 pin element id
*/
 function waterfall(parent,pin){
 var oParent=document.getElementById(parent);// Parent object
 var aPin=getClassObj(oParent,pin);// Get the array that stores the block box pin aPin
 var iPinW=aPin[0].offsetWidth;//The width of a block frame pin
 var num=Math.floor(document.documentElement.clientWidth/iPinW);//The pins that can be accommodated in each row Number [window width divided by the width of a block box]
 oParent.style.cssText='width:' iPinW*num 'px;ma rgin:0 auto;';//Set the parent centering style: fixed-width automatic Horizontal margin

 var pinHArr=[];//Used to store the combined height of all block boxes in each column.
 for(var i=0;i var pinH=aPin[i].offsetHeight;
 if(i< num){
                                                                                                                                                                           through num through to use use using use using using using so so so so so so so so so so so so so so so so so so to so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so long so so so so so so long so so so so so so so so so so so so so so so so so so so so so so so so pinHArr);//The minimum value minH
 in the array pinHArr var minHIndex=getminHIndex(pinHArr,minH);
 aPin[i].style.position='absolute';//Set the absolute displacement
 [i].style.top=minH 'px';
                                          aPin[i].style.left=aPin[minHIndex].offsetLeft 'px'; [i] Block box height 
            pinHArr[minHIndex] = aPin[i].offsetHeight;//Update the column height after adding the block box                                                                                                                                                  . **
 *Get the array of child elements of the same type through the class of the parent and child elements
*/
 function getClassObj(parent,className){
 var obj=parent.getElementsByTagName('*');//Get all subsets of the parent 
 var pinS=[];/ /Create an array to collect sub-elements
                                                                                                                                                                     ​className==className){
                                                                                                                                                         🎝>*/
 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 [triggering the adding block box function waterfall()]: the last block The distance between the box and the top of the webpage is half of its height (to start loading before scrolling to the bottom)
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//Pay attention to solving compatibility
 var documentH=document .documentElement.clientHeight;//Page height
 return (lastPinH }

Related labels：

js Waterfalls flow

source：php.cn

Previous article：Detailed explanation of the use of practical functions in parsing javascript_javascript skills Next article：jQuery drag image deletion example_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Analyzing waterfall flow layout: JS absolute positioning implementation_javascript skills