Posted in Javascript onJanuary 23, 2013
测试环境:ie8 ff13.0.1 chrome22
可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>waterfall flow</title> <script type="text/javascript" src="../jquery-1.8.0.min.js" /></script> <style type="text/css" > body{margin:0px;} #main{width:840px;margin:0 auto;} .flow{float:left;width:200px;margin:5px;background:#ABC;} </style> <script type="text/javascript" > $(document).ready(function(){ // 初始化内容 for(var i = 0 ; i < 3 ; i++){ $(".flow").each(function(){ $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>"); }); } $(window).scroll(function(){ // 被卷去的高度 var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; // 页面高度 var pageHeight = $(document).height(); // 可视区域高度 var viewHeight = $(window).height(); //alert(viewHeight); //当滚动到底部时 if((scrollTop+viewHeight)>(pageHeight-20)){ if(scrollTop<1000){//防止无限制的增长 for(var i = 0 ; i < 2 ; i++){ $(".flow").each(function(){ $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>"); }); } } } }); }); /* * 获取指定范围随机数 * @param min,最小取值 * @param max,最大取值 */ function getRandom(min,max){ //x上限,y下限 var x = max; var y = min; if(x<y){ x=min; y=max; } var rand = parseInt(Math.random() * (x - y + 1) + y); return rand; } </script> </head> <body> <div id="main"> <div class="flow" ></div> <div class="flow" ></div> <div class="flow" ></div> <div class="flow" ></div> </div> </body> </html>
jquery简单瀑布流实现原理及ie8下测试代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@