jquery实现简单瀑布流代码
测试环境：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>