<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> http://www.jb51.net/</div> </Body> </Html> |