Home > Developer > JavaScript
Effect
Html:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <Linkrel= "stylesheet"type= "Text/css"href= "Css/image.css"/> <Scripttype= "Text/javascript"src= "Js/jquery-2.1.0.js" ></Script> <Scripttype= "Text/javascript"src= "Js/image.js" ></Script> </Head> <Body> <Divclass= "Content"> <Divclass= "box"> <Divclass= "Img_box"><imgsrc= "Img/1.jpg"alt="" /></Div> </Div> <Divclass= "box"> <Divclass= "Img_box"><imgsrc= "Img/2.jpg"alt="" /></Div> </Div> <Divclass= "box"> <Divclass= "Img_box"><imgsrc= "Img/3.jpg"alt="" /></Div> </Div> <Divclass= "box"> <Divclass= "Img_box"><imgsrc= "Img/4.jpg"alt="" /></Div> </Div> <Divclass= "box"> <Divclass= "Img_box"><imgsrc= "Img/5.jpg"alt="" /></Div> </Div> <Divclass= "box"> <Divclass= "Img_box"><imgsrc= "Img/6.jpg"alt="" /></Div> </Div> <Divclass= "box"> <Divclass= "Img_box"><imgsrc= "Img/7.jpg"alt="" /></Div> </Div> <Divclass= "box"> <Divclass= "Img_box"><imgsrc= "Img/8.jpg"alt="" /></Div> </Div> </Div> </Body></HTML>
Css:
* {padding:0;margin:0;}. Content{position:relative;}. Box{float: Left;padding:12px 0px 0px 10px;}. Img_box{padding:10px;Border:Solid 1px Black;Border-radius:10px;Box-shadow:5px 5px 5px 2px darkgray;}. Img_box:hover{margin:12px;Box-shadow:3px 3px 3px 3px darkgray;}img{width:400px;}. Toast{position:fixed;width:170px;Height:50px;text-align:Center;Line-height:50px;Box-shadow:5px 5px 5px 2px darkgray;Border-radius:20px;background:Cornflowerblue;Top:600px; Left:600px;Color: White;Font-weight:Bold;font-size:20px;}
Js:
$ (document). Ready (function() {window.onload= init;//when the picture is finished loadingWindow.onscroll = SC;//When you scroll the progress bar$ (window). Resize (init);//When the browser page size changes functionSC () {//If the screen is visible height + scrolling height >= The height of the last picture + half of the last picture, then automatically load if(($ (window). scrolltop () + document.documentElement.clientHeight) >= ($(". Box"). Last (). Position (). Top + $ (". Box"). Last (). Outerheight ()/2)) { //load More for(vari = 1; I < 26; i++) { $(". Content"). Append ("<div class=\" box\ "><div class=\" img_box\ "></ Div></div> "); } $("Body"). Append ("<div class=\" toast\ "> Load in ......</div>"); //set delay auto-shutdownSetTimeout (function() {$ (". Toast"). Hide (200);}, 1000) init (); } } functioninit () {/** Waterfall Stream Image Code Analysis * Get the first line of pictures, the shortest picture location * Number: Total length/box length*/ //get the screen length varCLIENTW =Document.body.clientWidth; //get the length of a single box varBox = $ (". Box"). Outerwidth (); //get the number of rows varCount = parseint (CLIENTW/box); //Center The picture in the page$ (". Content"). css ({marginleft: (clientw-Box * count)/2 }) varStart = 0; varEnd = Start +count; //loops, putting a high number of incoming arrays vararr = []; $(". Box"). Slice (start, end). each (function() {Arr.push ($ ( This). Outerheight ()); }) //cycle, change the position of the shortest picture every time$ (". Box"). each (function(n) {//get the shortest picture and where it appears, starting with 0 varMinhei = Math.min.apply (NULL, arr); varPosit =$.inarray (Minhei, arr); //The left margin of the image that will appear is the position *box length varwidth = posit *box; //if it's the picture after the first line if(n >= count) {//if it's the back of the first line,$( This). css ({"Position": "Absolute", "Left": Width,"Top": Minhei,}); Arr[posit]+= $( This). Outerheight (); } }) }})
Jquery+javascript Complete Waterfall Flow Picture page 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
