"Javascript Demo" image waterfall Stream implementation

Waterfall flow is like a waterfall site-rich website content, especially beautiful pictures will make you linger. When you are browsing the site only need to gently swipe the mouse wheel, all the wonderful pictures can be presented in front of you. Waterfall Streaming site is a new type of website model--her typical representative is Pinterest, Beautiful said, Mushroom Street, this kind of website.

Here are the effects:

Core content:

1. Set the layout first

The main HTML code is as follows

<DivID= "Container">    <Divclass= "box">        <Divclass= "Content">            <imgsrc=".. /imgs/girls/01.jpg ">        </Div>    </Div>     ...</Div>

Then set the width fixed, highly adaptive,. Box relative layout, floating left:

. Box{position:relative;float: Left; }. Content{padding:2px;Border:1px solid #ccc;Border-radius:2px; }. Content img{width:234px;Height:Auto; }#container{background:#fff None Repeat scroll 0 0;margin:0 Auto;width:Auto; }

2. Picture Placement

Because the height of the picture is inconsistent, first get the number of pictures in the first row according to the page size, then put the first picture of the second row below the height of the first line, and so on:

functionimglocation () {varCparent = document.getElementById ("Container"); //get all the elements with the class name box    varCcontent = GetChildElement (cparent, "box"); //the width of the first picture    varImgWidth = ccontent[0].offsetwidth; //number of pictures in the first column    varNumline = Math.floor (document.documentelement.clientwidth/imgwidth);//set the width of the parent containerCparent.style.cssText = "width:" + imgwidth * numline + "px"; //get the height of each picture    varBoxheightarr = [];  for(vari=0;i<ccontent.length;i++){        if(i<numline) {            //Add the height of the first line element to the arrayBoxheightarr[i] =Ccontent[i].offsetheight; }Else {            //get the picture with the lowest height of the first line, then place the first image below it, and so on            varMinHeight = Math.min.apply (NULL, Boxheightarr); //get the index of the lowest height picture            varMinindex =Getminheightindex (boxheightarr,minheight); Ccontent[i].style.position= "Absolute"; Ccontent[i].style.top= minheight+ "px"; Ccontent[i].style.left= ccontent[minindex].offsetleft+ "px"; //Recalculate HeightBoxheightarr[minindex] + =Ccontent[i].offsetheight; }    }}functionGetminheightindex (Boxheightarr, minheight) { for(varIinchBoxheightarr) {        if(Boxheightarr[i] = = =minheight) {            returni; }    }}functiongetchildelement (parent,classname) {varContentarr = []; varAllcontent = Parent.getelementsbytagname ("*");  for(vari=0;i<allcontent.length;i++){        if(Allcontent[i].classname = = =className)        {Contentarr.push (allcontent[i]); }    }    returnContentarr;}

3. Rolling load

Then determine whether the data is loaded automatically by judging whether the mouse is sliding to the bottom.

First, decide whether to slide to the bottom of the page:

functionIsscrollbottom () {varCparent = document.getElementById ("Container"); varCcontent = GetChildElement (cparent, "box"); //the height of the page when the last picture appears half the time    varLastcontentheight = Ccontent[ccontent.length-1].offsettop + Math.floor (CCONTENT[CCONTENT.LENGTH-1].OFFSETHEIGHT/2) ;//the height of the current page    varPageHeight = document.documentelement.clientheight| |Document.body.clientHeight; //height of mouse scrolling    varscrolltop = Document.documentElement.scrollTop | |Document.body.scrollTop; //whether scrolling is allowed    return(Lastcontentheight < (pageheight + scrolltop))?true:false;}

Then listen for scrolling events and load the picture when the load condition is met:

Window.onscroll =function () {    //when the last picture appears half loaded    if(Isscrollbottom ()) {//Loading Pictures        varCparent = document.getElementById ("Container");  for(vari=0;i<dataimg.data.length;i++){            varbox = document.createelement ("div"); Box.classname= "box";            Cparent.appendchild (box); varContent = document.createelement ("div"); Content.classname= "Content";            Box.appendchild (content); varimg = document.createelement ("img"); IMG.SRC=dataimg.data[i].src;        Content.appendchild (IMG); }        //Reset Picture Positionimglocation (); }}

PS: You can also initialize the HTML code of the image via Ajax:

functionInitializeimgs () {varXMLHTTP; if(window. XMLHttpRequest) {//code for ie7+, Firefox, Chrome, Opera, Safarixmlhttp=NewXMLHttpRequest (); }    Else    {//code for IE6, IE5xmlhttp=NewActiveXObject ("Microsoft.XMLHTTP"); } Xmlhttp.onreadystatechange=Handleresponse; Xmlhttp.open ("GET", Url4girls,true); Xmlhttp.send ();}functionHandleresponse (e) {//when the onReadyStateChange event is triggered, the browser passes an event object to the specified handler, and the target property is set to the XMLHttpRequest associated with this event    if(E.target.readystate = = Xmlhttprequest.done && E.target.status = = 200) {//Request succeededAddimgbox (E.target.responsetext); }}functionAddimgbox (data) {//parse the returned XML file    varImgarr = loadxmlstring (data). getElementsByTagName ("string"); varCparent = document.getElementById ("Container");  for(vari=0;i){        varbox = document.createelement ("div"); Box.classname= "box";        Cparent.appendchild (box); varContent = document.createelement ("div"); Content.classname= "Content";        Box.appendchild (content); varimg = document.createelement ("img"); IMG.SRC=imgarr[i].innerhtml;    Content.appendchild (IMG); } imglocation ();}

Related documents :

Index_by_javascript.htmlindex_by_javascript.jsindex_by_javascript_ajax.htmlindex_by_javascript_ Ajax.jsyctools.jswaterfall.css

Specific to view the source code

"Javascript Demo" image waterfall Stream implementation