Home > Developer > Web Develop
Waterfall stream-jquery code, waterfall-jquery code
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> infinite loading of jquery random image waterfall stream </title>
<Style type = "text/css">
* {Margin: 0; padding: 0; list-style-type: none ;}
A, img {border: 0 ;}
Body {font: 12px/180% Arial, Helvetica, sans-serif, "";}
/* Container */
# Container {width: 940px; margin: 50px auto ;}
# Container ul {width: 300px; list-style: none; float: left; margin-right: 20px ;}
# Container ul li {margin-bottom: 20px ;}
# Container ul li img {width: 300px ;}
</Style>
</Head>
<Body>
<Div id = "container">
<Ul class = "col">
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Ul class = "col"> </ul>
<Ul class = "col" style = "margin-right: 0"> </ul>
</Div>
<Script type = "text/javascript" src = "/ajaxjs/jquery-1.9.1.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Function loadMeinv (){
Var data = 0;
For (var I = 0; I <9; I ++) {// simulate random image loading at each loading
Data = parseInt (Math. random () * 9 );
Var html = "";
Html = '<li> Using data='.jpg> <p> src ='
Using data='.jpg </p> </li> ';
$ MinUl = getMinUl ();
$ MinUl. append (html );
}
}
LoadMeinv ();
$ (Window). on ("scroll", function (){
$ MinUl = getMinUl ();
If ($ minUl. height () <= $ (window). scrollTop () + $ (window). height ()){
// Load the new image when the shortest ul height is greater than the window height + the browser height
LoadMeinv ();
}
})
Function getMinUl () {// obtain the shortest ul every time and put the image behind it
Var $ arrUl = $ ("# container. col ");
Var $ minUl = $ arrUl. eq (0 );
$ ArrUl. each (function (index, elem ){
If ($ (elem). height () <$ minUl. height ()){
$ MinUl = $ (elem );
}
});
Return $ minUl;
}
})
</Script>
<Div style = "text-align: center; margin: 50px 0; font: normal 14px/24px 'Microsoft yahei';">
</Div>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>
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
