Home > Developer > Web Develop
Haha, I came again, in this period of time, I simply learn JavaScript (JS), although not very understand, but I also simple try to do something small, such as the current popular waterfall flow effect, after my efforts finally completed, although the middle of very bumpy, is not smooth sailing but finally I have achieved a simple effect, the following for everyone simple introduction, do not know the friends, if you are interested, you can refer to the following, welcome to point out the shortcomings and shortcomings!
I. Preparation for the waterfall flow
first of all, in order to facilitate the presentation and contact, I am using a local image, if you need to try to write down the network, but the local and remote is roughly the same. So let me briefly introduce the local waterfall flow effect, we have to prepare eight or nine pictures, of course, We achieve the waterfall flow effect, so it is best to be highly different, so as to see the effect, right, hey.
Two. Preparing Your code
We open the development tool, first build an HTML project, write the following code inside, because it is ready to work, so just started to write some basic things, do not explain, directly on the code:
<Body><DivID= "Container"> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/1.jpeg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/2.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/3.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/4.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/5.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/6.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/7.gif"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/8.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/9.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/9.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/9.jpg"> </Div> </Div> <Divclass= "box"> <Divclass= "Boximg"> <imgsrc= "Img/9.jpg"> </Div> </Div></Div></Body>
It is obvious that this code is a few div tags and a few img tags, so it is very simple, not much to say, let's lay out the CSS style.
Three. CSS style layout
To say a more real words, for the waterfall flow, because I am just a simple simulation under, so the CSS style of customization, I do not have a particularly complex customization, just simple to the border and container (DIV) Size to customize the next, there are some colors, words not much to say, directly on the code bar
/* Use wildcards to set both inside and outside margins to zero, so look good */*{ margin:0px; padding:0px;} /* Set the layout of the primary container to relative layout */#contianer { position:relative;}. box{ padding:5px; Float:left;} /* Customize the color and border size and rounded corners of the container that hosts the picture */.boximg{ padding:5px; box-shadow:0 0 5px #ccc; border:1px solid #cccccc; border-radius:5px;} /* Custom image size */.boximg img{ width:250px; Height:auto;}The comments in the code have been explained very clearly, it is no longer too much to repeat.
Four. The focus is also the difficulty of waterfall flow (JS implementation)
Everyone is not unfamiliar with the waterfall flow, it is mainly the top-wide, and then according to the height of the layout, that is, after the first line is paved, ready to arrange the second row, the second row of the first picture in the first line of the picture height of the smallest, then and so on, the first simple code, and then explained, The so-called there is a picture of the truth, haha!
this is when the JS code is not written, then according to the truth, the following picture should be placed in the first row of the second picture under the position, should make full use of blank resources, then how to implement it, then I enclose the code to tell you:
window.onload = function () {Waterflow ("container", "box"); }function Waterflow (parent, Chirld) {var wparent = document.getElementById (parent);//Get Parent div, outer container var Allarr = Get Allchirld (Wparent,chirld);//Gets all of the class box's container div var wscreenwidth = document.documentelement.clientwidth;//Gets the screen width var wchirldwidth = wparent.getelementsbytagname ("*");//gets all the tags var num = math.floor (wscreenwidth/wchirldwidth[0]. offsetwidth);//This is a math algorithm that is designed to convert decimals to integers,//So you can know that each line holds a maximum of several pictures Wparent.style.cssText = ' width: ' +wchirldwidth[0].offsetw idth*num+ ' px;margin:0 auto ';//fixed the number of rows per row and the upper and lower left/right margin//Get the minimum height of each row getminheightofcols (Allarr, num);} function Getallchirld (parent,classname) {//Get all tags var wchirld = parent.getelementsbytagname ("*"); Create array var chirldarr = []; Traverse the Wchirld, placing the same label where ClassName equals classname (passed in arguments) into the array chirldarr for (var i = 0; I<Wchirld. length; i++) {if (Wchirld[i].classname==classname) { //Because it is a bit push so did not put in a, are in the array of the last Chirldarr.push (Wchirld[i]); }}//returns the array return Chirldarr;} function Getminheightofcols (Chirdarr, num) {//Create an array to hold the height of each row var Onlyonecolsarr= []; For (var i= 0;i<chirdarr.length; i++) {if (i<num) {//num is the passed-in parameter, which is the number of pictures placed on each line, the purpose of this step is to traverse the height of each picture in the first row to hold the new array onlyonecolsarr[i]=chirdarr[i].offsetheight; } else {//When the method is entered that is greater than the number of pictures per row, Math.min.apply This method is to get the minimum value in the array var minheightofcols= Math.min.apply (null,Onlyonecolsarr); The purpose of this method is to get the minimum height picture of the following table, that is, the number of sheets in each line, see Var minheightofindex below for concrete method= Getminindex (Onlyonecolsarr,minheightofcols); Define layout as absolute layout chirdarr[i].style.position= "Absolute"; Get the next line of the picture should be put height chirdarr[i].style.top= Minheightofcols+ "px"; Get the next line of the picture should be placed in that position Chirdarr[i].style.left= Chirdarr[minheightofindex].offsetleft+ "px"; Add two picture heights to get a new height for the next calculation Onlyonecolsarr[minheightofindex] += Chirdarr[i].offsetheight; }}}//This method is for the determination of the minimum height subscript function getminindex (Onlyonecolsarr, min) {//traversal of the passed in height array for (var i in Onlyonecolsar R) {//If the height is equal to the minimum height, return i is the image subscript if (Onlyonecolsarr[i]== min) {return i; } }}
Note has been very clear, if you do not know the place, welcome comments message, below let us see it, hey
Five. Simulation Network load of waterfall stream
write here a lot of people must think that it is almost over, but I would like to expand a little bit of knowledge, that is how to achieve similar to the infinite load on the network, the following attached code, because the time is a bit tense do not do a detailed introduction, there is no welcome wise:
window.onload = function () {Waterflow ("container", "box"); var dataint={' data ': [{' src ': ' 1.jpeg '},{' src ': ' 2.jpg '},{' src ': ' 3.jpg '},{' src ': ' 4.jpg '},{' src ': ' 5.jpg '},{' src ': ' 6. JPG '}, {' src ': ' 7.gif '},{' src ': ' 8.jpg '},{' src ': ' 9.jpg '}]}; Window.onscroll=function () {if (Checkscrollside ()) {var oparent = document.getElementById (' container ');// Parent object for (Var i=0;i<Dataint. data.length;i++) {var Opin=document.createelement (' div ');//Add element node Opin.classname= ' box '; //Add class name Name attribute Oparent.appendchild (Opin); Add a child node var oBox=document.createelement (' div '); Obox.classname= ' boximg '; Opin.appendchild (OBox); var oimg=document.createelement (' img '); oimg.src= './img/' +dataint.data[i].src; Obox.appendchild (OIMG); } waterflow (' Container ', ' box '); }; }}
because the size of the picture is limited, so I can not bring you, hope forgive me.
Well, today's share is here, hope that we have more suggestions, there is time to come again, do not understand can ask Ha, Hei, the above is a simple waterfall flow effect, not bad, come on!
Using JS to achieve a simple waterfall flow effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
