Home>

Let's talk about what a waterfall layout is.

It is a page composed of a series of data blocks of equal width and different height.As shown in the figure:

Many websites now use this waterfall layout,Such as Mushroom Street.Beautiful said wait.

The first thing to realize is to understand how it is arranged.

The number of columns in each row is calculated according to the width of the image and the width of the page..

The first line is in order,The other data blocks are sorted in order of the lowest one in each column.

First implement the framework.

<div id="main">
 <div class="box">
  <div class="pic">
   <img src="images/0.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/1.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/2.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/3.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/4.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/5.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/6.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/7.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/8.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/9.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/10.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/11.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/12.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/13.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/14.jpg">
  </div>
 </div>
</div>

There are 14 pictures defined here, and each picture is wrapped by a class=box attribute and a class="pic" attribute.Define its style in css:

* {
  padding:0px;
  margin:0px;
 }
 #main {
  position:relative;
 }
 .box {
/* display:inline-block;* /
  padding:15px 0px 0px 15px;
  float:left;
 }
 .pic {
  padding:10px;
  border-radius:5px;
  border:1px solid #ccc;
  box-shadow:0 0 5px #ccc;
 }
 .pic img {
  width:165px;
  height:auto;
 }
 </style>

In fact, six pictures per line are not fixed.When you shrink the window,It will become two columns,Or three columns and four columns.But for the future layout,Just set it to a fixed number of columns,Which is based on the size of the window divided by the size of the picture,Round down.

The next thing to write is the waterfall layout implemented by js.

Before writing the code,Since the box attribute is used, and there is no direct definition of the method to obtain the class in js, we need to write a method to obtain the class here:

function getbyclass (parent, classname) {
 var boxarr=new array ();//Used to get all elements of class box
 oelement=parent.getelementsbytagname ("*");
 for (var i=0;i<oelement.length;i ++) {
  if (oelement [i] .classname == classname) {
   boxarr.push (oelement [i]);
  }
 };
 return boxarr;
}

The two parameters are the parent element and the classname to find.

Next write the function:

//First call the function in the onload function
window.onload=function () {
 waterfull ("main", "box");
}
function waterfull (parent, children) {
 //First get the parent element and all the elements of class=box below it
 var oparent=document.getelementbyid (parent);
 var oboxs=getbyclass (oparent, children);
//We said before,The number of columns in the data block is expected to be constant.
Since each data block is of equal width,So you can take the width of the first data block,Get the width of the data block.
Then calculate the number of columns of the data block,Round down.
 var oboxw=oboxs [0] .offsetwidth;
 var cols=math.floor (document.documentelement.clientwidth/oboxw);
Next, style the parent element.
We need to get its width,And center it
oparent.style.csstext="width:" cols * oboxw + "px;margin:0 auto";
//After all the styles are defined,Is to arrange the data block.
First, the first line is directly aligned.
Define an array to store the height of each column,From the second line,Make each data block in the column with the lowest height.
First you have to iterate through all the boxes, that is, oboxs
var arrh=[];//Define the height of each column in the array
for (var i=0;i<oboxs.length;i ++) {
 //When it is the first line,Arrange the data blocks directly,And record the height of each column in the array
 if (i<cols) {
  arrh [i]=oboxs [i] .offsetheight;
 }
 //When i>cols, it is necessary to traverse the height of all the previous columns,Put the next picture in the right place.
 else {
 //First find the lowest number of columns in the array.
We all know that math.min can find the smallest number,But the parameter it accepts must be a set of numbers,So here we are going to use the math.min.apply () method
 var minh=math.min.apply (null, arrh);//define a variable,The smallest height in the array
 //After finding the minimum height,We need to know its index,To find the right place for the next block of data,Therefore, a function to find the minimum index is defined below.
 //Define a variable to accept the return value of the getminhindex function
 var minindex=getminhindex (arrh, minh);
 //After obtaining the index of the smallest number of columns,You can place the next element in the right place
 oboxs [i] .style.position="absolute";
 oboxs [i] .style.top=minh + "px";
 oboxs [i] .style.left=minindex * oboxw + "px";
 //Finally put the current data blocks into the proper position,But don't forget to update the arrh array
 arrh [minindex] +=oboxs [i] .offsetheight;
 }
}
}
//Get the current minimum worth subscript
function getminhindex (array, min) {
 for (var i in array) {
  if (array [i] == min)
   return i;
 }
}

Attach the source code:

js code:

window.onload=function () {
 waterfull ("main", "box");
}
function waterfull (parent, children) {
 var oparent=document.getelementbyid (parent);
 //var oboxs=parent.queryselectorall (". box");
  var oboxs=getbyclass (oparent, children);
 //Calculate the number of columns displayed on the entire page
 var oboxw=oboxs [0] .offsetwidth;
 var cols=math.floor (document.documentelement.clientwidth/oboxw);
 //Set the width of main and center it
 oparent.style.csstext="width:" + oboxw * cols + "px;margin:0 auto";
 //Find the smallest height picture,Place the next picture below
 //define an array,Store the height of each column,Initialize the height of all columns in the first row
 var arrh=[];
 for (var i=0;i<oboxs.length;i ++) {
  if (i<cols) {
   arrh.push (oboxs [i] .offsetheight);
  }
  else {
   var minh=math.min.apply (null, arrh);
   var minindex=getminhindex (arrh, minh);
   oboxs [i] .style.position="absolute";
   oboxs [i] .style.top=minh + "px";
   oboxs [i] .style.left=minindex * oboxw + "px";
  //oboxs [i] .style.left=arrh [minindex] .;
   arrh [minindex] +=oboxs [i] .offsetheight;
  }
 }
}
function getbyclass (parent, classname) {
 var boxarr=new array ();//Used to get all elements of class box
 oelement=parent.getelementsbytagname ("*");
 for (var i=0;i<oelement.length;i ++) {
  if (oelement [i] .classname == classname) {
   boxarr.push (oelement [i]);
  }
 };
 return boxarr;
}
//Get the current minimum worth subscript
function getminhindex (array, min) {
 for (var i in array) {
  if (array [i] == min)
   return i;
 }
}

HTML and CSS code:

<! Doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="./jswaterfll.js"></script>
 <title>Waterfall layout</title>
 <style type="text/css">
 * {
  padding:0px;
  margin:0px;
 }
 #main {
  position:relative;
 }
 .box {
/* display:inline-block;* /
  padding:15px 0px 0px 15px;
  float:left;
 }
 .pic {
  padding:10px;
  border-radius:5px;
  border:1px solid #ccc;
  box-shadow:0 0 5px #ccc;
 }
 .pic img {
  width:165px;
  height:auto;
 }
 </style>
</head>
<body>
<div id="main">
 <div class="box">
  <div class="pic">
   <img src="images/0.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/1.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/2.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/3.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/4.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/5.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/6.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/7.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/8.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/9.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/10.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/11.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/12.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/13.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/14.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/15.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/16.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/17.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/18.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/19.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/20.jpg">
  </div>
 </div>
 <div class="box">
  <div class="pic">
   <img src="images/21.jpg">
  </div>
 </div>
</div>
</body>
</html>

Related articles

  • Previous Use nodejs to crawl the worry-free front-end skills ranking
  • Next Three ways to customize services in Angularjs (recommended)