jquery实现简单瀑布流代码
测试环境：ie8 ff13.0.1 chrome22
可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度
[html]view plaincopy
- <!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 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 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 >
- <div class="flow" ></div>
- <div class="flow" ></div>
- <div class="flow" ></div>
- <div class="flow" ></div>
- </div>
- </body>
- </html>
- 上一篇 »css瀑布流
- 下一篇 »jquery/原生js/css3 实现瀑布流以及下拉底部加载