Home > Developer > JavaScript
Learn JS, active thinking, flexible use of a more typical learning case. The same waterfall flow effect but there are many ways to achieve, using recursion, bubbling and so on can achieve the purpose you want. This is to say that the use of similar recursive return to achieve this effect of the original scheme. This program personally believes that the difficulty coefficient is low
1<?PHP2 //no data source, using an array that iterates through all the pictures in the corresponding folder to simulate the data source3$arr =Array ();4$dir = @opendir (' images ');5 while($file =@readdir ($dir)) {6 if($file = = '. ' | | $file = = ' ... '){7 Continue;8 }9$arr [] =$file;Ten } One @closedir ($dir); A?> -<! DOCTYPE html> - the -<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> -<title> Waterfall Flow </title> -<style type= "Text/css" > +*{padding:0;margin:0} -. box{padding:5px;float: Left;} +. image{padding:5px;border:1px solid #ccc; box-shadow:0 0 5px #ccc; border-radius:5px;} A . Image Img{width:150px;height:auto;} at</style> - -<body> -<div id= "container" style= "" > -<?php foreach ($arr as $val):?> -<div class= "box" > in<div class= "image" > - to</div> +</div> -<?php Endforeach;? > the</div> *</body> $<script>Panax NotoginsengWindow.onload =function(){ -Imglocation (' Container ', ' box '); the } +Window.onresize =function(){ AImglocation (' Container ', ' box '); the } + functionimglocation (parent,content) { - //Gets the node object of the large box $ varCparent =document.getElementById (parent); $ //Find all the picture boxes from the big box - varCcontent =getchildelement (cparent,content); - //since CSS has already stipulated that all IMG widths are 150, so the width of the picture box returned here is 150+5*2+5*2+2 = 172; the varImgWidth = ccontent[0].offsetwidth; - //the maximum number of the first row can be placed at the current width by dividing the body width and the width of the picture box.Wuyi varcols = Math.floor (Document.documentElement.clientWidth/imgwidth); the //The width of the large box should be obtained by multiplying the number of the calculated rows by the width of each image. -Cparent.style.cssText = ' width: ' +imgwidth*cols+ ' px;margin:0 auto; '; Wu Console.log (cols); - //defines the array used to hold the height of the first row of picture boxes About varBoxheightarr = []; $ //Loop through all picture boxes - for(vari=0;i<ccontent.length;i++){ - //use i's self-increment to get the height of all the boxes in the first row (this is a very ingenious design) - if(i<cols) { A //appends the height of all boxes in the first row to the previously defined array +Boxheightarr[i] =Ccontent[i].offsetheight; the //and remove all the absolute positioning of the first row of boxes, or it will break the adaptive when the window is stretched in real time -ccontent[i].style.position = ' '; $}Else{ the //gets the minimum height from the height array used when the first row is cycled the varMinHeight = Math.min.apply (NULL, Boxheightarr); the //The position of the box where the custom function obtains the minimum height (subscript) the varMinindex =getminheightlocation (boxheightarr,minheight); - //Modify the second row to start the CSS, the box positioning modified to absolute positioning, for the back of the movement most prepared inccontent[i].style.position = ' absolute '; the //Change the y-coordinate of the current loop box to the height of the smallest box (this allows the current box to be ranked below the first row of the smallest box) theCcontent[i].style.top = minheight + ' px '; About //changes the X coordinate of the current loop box to the x-coordinate of the position of the smallest box (to achieve the alignment effect) theCcontent[i].style.left = ccontent[minindex].offsetleft + ' px '; the //Update the minimum height in the array of the first row of Box heights when all modifications to this cycle have been completed the //Now the minimum height of the box should be the height of the previous one plus the height of the box appended to the second row . + //This loop operates all the boxes to achieve the waterfall flow effect. -Boxheightarr[minindex] = boxheightarr[minindex]+Ccontent[i].offsetheight; the }Bayi } the } the //The following is the beginning of the auxiliary section, do not repeat, above is the core of implementation, the principle has one by one TD - functiongetchildelement (parent,content) { - varContentarr = []; the varAllcontent = Parent.getelementsbytagname (' * ')); the for(vari=0;i<allcontent.length;i++){ the if(Allcontent[i].classname = =content) { the Contentarr.push (Allcontent[i]); - } the } the returnContentarr; the }94 the functiongetminheightlocation (boxheightarr,minheight) { the for(vari=0;i<boxheightarr.length;i++){ the if(Boxheightarr[i] = =minheight) {98 returni; About } - }101 102 }103 104</script> theEffect Show:
Use native JavaScript to achieve a picture waterfall stream browsing 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
