<title>jquery random picture Waterfall Stream Unlimited load </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, "new song Body";}
/* 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>
<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 loading of pictures on each load
data = parseint (Math.random () *9);
var html = "";
html = ' <li>+data+ '. jpg><p>src= '
+data+ ' .jpg</p></li> ';
$minUl = Getminul ();
$minUl. Append (HTML);
}
}
LOADMEINV ();
$ (window). On ("Scroll", function () {
$minUl = Getminul ();
if ($minUl. Height () <= $ (window). scrolltop () +$ (window). Height ()) {
Load new pictures When the shortest ul height is higher than the height of the window roll out + browser height
LOADMEINV ();
}
})
function Getminul () {//each time get the shortest ul, put the picture behind
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>
Waterfall Stream-jquery Code
