jquery简单瀑布流实现原理及ie8下测试代码

测试环境：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如何改变html标签的样式(两种实现方法)

对于如何修饰html标签，这对于js来说，可以通过setAttribute来设置标签的属性，通过getAttribute来得到标签的属性，而在jq中当然也可以实现类似的功能，方法上肯定比js要简化多了。一　通过修改标签属性来改变它的>>>详细阅读

本文标题：jquery简单瀑布流实现原理及ie8下测试代码

地址：http://www.17bianji.com/kaifa2/JS/22485.html

1/2 1