Waterfall flow layout in absolute positioning mode:
First, the layout
1. The container enclosing the block box:
Copy Code code as follows:
<div id= "Main" >
... ...
<div>
2, a block box:
Copy Code code as follows:
<div class= "Pin" >
<div class= "box" >
</div>
</div>
3, initialize the first line/5 block box:
Copy Code code as follows:
. pin{
padding:15px 0 0 15px;
Float:left;}
. box{
padding:10px;
border:1px solid #ccc;}
. Box img{
width:192px;
Height:auto;}
Effect:
Second, train of thought:
1, set the style of the parent main: horizontal center.
2. Set the style of pin for each block frame: absolute positioning.
3, set the window scrolling event listener function: Read Data add block box.
JS implementation:
1-①: Get parent Oparent:
1-②: Create function Getclassobj ()-Gets the array containing the block box by parent ID and block-box class name.
Copy Code code as follows:
var Oparent=document.getelementbyid (' main ');//Parent Object
var apin=getclassobj (Oparent,pin);//Get the array that stores the pin of the Block box Apin
var num=math.floor (document.documentelement.clientwidth/apin[0].offsetwidth); get-the number of block boxes that can fit in each row-num "window width divided by a block width"
oparent.style.csstext= ' width: ' +ipinw*num+ ' px;margin:0 auto; /Use the Csstext property to add the center style to the parent main: fixed width + automatic horizontal outer margin
Copy Code code as follows:
function Getclassobj (parent,classname) {
var obj=parent.getelementsbytagname (' * ');//Get all subsets of parent
var pins=[];//creates an array to store the elements of the class as ClassName
for (Var i=0;i<obj.length;i++) {//Traversal subset, judging class name, pressing array
if (obj[i].classname==classname)
Pins.push (Obj[i]);
};
return PinS;}
2-①: Create an array pinharr-to store each column height;
The 2-②:FOR statement iterates through each block box Apin[i], assigns the first num block box to the array Pinharr, and absolutely locates the block box that exceeds the number of block boxes that can be accommodated in a row.
2-③: Using the Create Function Getminhindex ()-Returns the smallest value in an array
Copy Code code as follows:
The Var pinharr=[];//is used to store the added height of all the block boxes in each column "as the number of columns varies, the length of this array changes"
for (Var i=0;i<apin.length;i++) {//traversal of each block element of an array apin
var pinh=apin[i].offsetheight;//gets the visible width of the apin block box of the array offsetheight
if (i<num) {//
Pinharr[i]=pinh; The NUM block box in the first line Apin first to add to the array Pinharr
}else{
var minh=math.min.apply (Null,pinharr);//Calculate the minimum value in the array Pinharr MinH
var minhindex=getminhindex (Pinharr,minh);//through the created Getminhindex ()-Gets the minimum MinH index in the array Pinharr minhindex
apin[i].style.position= ' absolute '/set absolute displacement
apin[i].style.top=minh+ ' px ';
apin[i].style.left=apin[minhindex].offsetleft+ ' px ';//array min high element high + + add apin[i] block box high
pinharr[minhindex]+=apin[i].offsetheight;//update Liegau After adding a block box
}
}
Copy Code code as follows:
function Getminhindex (Arr,minh) {
for (var i in arr) {
if (Arr[i]==minh) return i;
}
}
3: Set the Window scrolling event listener function: Read Data add block box.
Copy Code code 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
The following defines the window scrolling event listener function
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 '); Create add element node pin
Opin.classname= ' pin '; Add Class name Name property
Oparent.appendchild (Opin); Create Add child node box
var obox=document.createelement (' div ');
obox.classname= ' box ';
Opin.appendchild (Obox);
var oimg=document.createelement (' img ');//Create Add child node img
Oimg.src= './images/' +dataint.data[i].src;
Obox.appendchild (OIMG);
}
Waterfall (' main ', ' pin ');//to encapsulate ①② into function waterfall (), add added nodes to add and navigate to the document.
};
}
Copy Code code as follows:
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 trigger Add block function waterfall (): The last block box is the distance from the top of the page + its own high half (implementation does not roll to start loading)
var scrolltop=document.documentelement.scrolltop| | document.body.scrolltop;//attention to resolving compatibility
var documenth=document.documentelement.clientheight;//window Height
Return (lastpinh<scrolltop+documenth)? true:false;//returns True when the specified height is reached, triggering the waterfall () function
}
Third, the final effect:
Summary: This is to let oneself comb the train of thought, expression is not too careful and coherent, only for reference.
After the completion of the HTML file and JS file:
Html:index.html
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "anchor" content= "Who Care"/>
<script type= "Text/javascript" src= "Waterfall.js"/></script>
<title></title>
<style type= "Text/css" >
*{padding:0;margin:0;}
#main {
position:relative;
}
. pin{
padding:15px 0 0 15px;
Float:left;
}
. box{
padding:10px;
border:1px solid #ccc;
box-shadow:0 0 6px #ccc;
border-radius:5px;
}
. Box img{
width:162px;
Height:auto;
}
</style>
<body>
<div id= "Main" >
<div class= "Pin" >
<div class= "box" >
</div>
</div>
<div class= "Pin" >
<div class= "box" >
</div>
</div>
<div class= "Pin" >
<div class= "box" >
</div>
</div>
<div class= "Pin" >
<div class= "box" >
</div>
</div>
<div class= "Pin" >
<div class= "box" >
</div>
</div>
</div>
</body>
Js:waterfall.js 1 window.onload=function () {
Copy Code code as follows:
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 ');//Parent Object
for (Var i=0;i<dataint.data.length;i++) {
var opin=document.createelement (' div '); add element node
Opin.classname= ' pin '; Add Class name Name property
Oparent.appendchild (Opin); Add child nodes
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 ID
Pin Element ID
*/
function Waterfall (parent,pin) {
The Var Oparent=document.getelementbyid (parent);//Parent Object
var apin=getclassobj (Oparent,pin);//Get the array that stores the pin of the Block box Apin
var ipinw=apin[0].offsetwidth;//a block-box pin width
var num=math.floor (DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/IPINW);//number of pins that can be accommodated in each row "window width divided by a block box width"
oparent.style.csstext= ' width: ' +ipinw*num+ ' px;ma rgin:0 auto; /Set Parent Center style: Fixed width + automatic horizontal outer margin
var pinharr=[];//is used to store the height of the addition of all block boxes in each column.
for (Var i=0;i<apin.length;i++) {//traversal of each block element of an array apin
var pinh=apin[i].offsetheight;
if (i<num) {
Pinharr[i]=pinh; The NUM block pin in the first line is added first into the array Pinharr
}else{
var minh=math.min.apply (Null,pinharr);//The minimum value in the array Pinharr MinH
var minhindex=getminhindex (Pinharr,minh);
apin[i].style.position= ' absolute '/set absolute displacement
apin[i].style.top=minh+ ' px ';
apin[i].style.left=apin[minhindex].offsetleft+ ' px ';
High + + added Apin[i] block height of array minimum high element
pinharr[minhindex]+=apin[i].offsetheight;//update Liegau After adding a block box
}
}
}
/****
* Gets an array of the same child elements through the class class of the parent and child elements
*/
function Getclassobj (parent,classname) {
var obj=parent.getelementsbytagname (' * ');//Get all subsets of parent
var pins=[];//creates an array to collect child elements
for (Var i=0;i<obj.length;i++) {//traversing child elements, judging categories, pressing an array
if (obj[i].classname==classname) {
Pins.push (Obj[i]);
}
};
return PinS;
}
/****
* Gets 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 trigger Add block function waterfall (): The last block box is the distance from the top of the page + its own high half (implementation does not roll to start loading)
var scrolltop=document.documentelement.scrolltop| | document.body.scrolltop;//attention to resolving compatibility
var documenth=document.documentelement.clientheight;//page Height
Return (lastpinh<scrolltop+documenth)? true:false;//returns True when the specified height is reached, triggering the waterfall () function
}
