以前js 实现过一个瀑布流，jquery 也来实现一个
主要思路：
1 先显示出来大概20张图片，使界面出现滚动条
2 设置显示出来图片父id 设置为relative 定位，图片定位方式为float 定位
3 使刚显示出来的图片作为折叠出现，呈现为瀑布流
4 当滚动 滚动条时，判断是否进行加载图片
5 使新加载的图片重新进行瀑布流排序
重点：
1 判断什么时间进行加载新图片
2 实现瀑布流式排序
怎样确定加载哪部分图片那，在后台limit 一下位置就ok啦
好，，上代码:
1 先显示出来部分图片
//实现瀑布流显示图片public function photo(){$id = M("Cate")->field("id")->where("name = '相册展示'")->select();$this->image_list = M("Blog")->field("content ,summary")->limit(10)->order("time desc")->where("cid = {$id[0]['id']}")->select();$this->length=10;//刚开始显示10张图片$this->cur_position = '相册展示';$this->id= $id[0]['id'];$this->display();}2 前台代码：<ul class="tips" id="wf-main"><volist name="image_list" id='v'><li class="wf-cld"><img src="{$v.content|ltrim = ###,'.'}" width="200" height="auto" alt="{$v.title}" /></li><li class="wf-cld"><img src="{$v.summary|ltrim = ###,'.'}" width="200" height ="auto" alt="{$v.title}" /></li></volist></ul>3 前台样式： <!–content end–><style type='text/css'>#wf-main{position: relative;}#wf-main li{padding: 15px 0 0 15px; float:left;}</style>
4 重点 js 代码：
$(function(){waterfall();//进行加载图片$(window).scroll(function(){if(checkscrollside()){var offset = $("input[name=offset]").val();var length = $("input[name=length]").val();var justice = $("input[name=justic]").val();if(justice === offset){return false;}else{$("input[name=justic]").val(offset);}$.post( //每次添加新元素进行瀑布流排序"/Index/Show/more_photo",{offset :offset,length:length},function(data){if(data){$(data).each(function(index,value){$li = $("<li>").addClass("wf-cld").appendTo("#wf-main");$("<img>").attr({"src":value.summary,"title":value.title}).css({"width":"200px","height":"auto"}).appendTo($li);});$("input[name=offset]").val(parseInt(offset) + 10);console.log($("#wf-main>li").length);//确保滚动条高度保持不变var scroll_top = $(window).scrollTop();waterfall();$(window).scrollTop(scroll_top);}},"json");}});});//让图片折叠排列function waterfall(){ var $par_main = $("#wf-main"); //父元素 var $child_main = $("#wf-main>li"); //子元素 var par_width = $par_main.width(); //获得父元素的宽度 var child_width = $child_main.eq(0).width(); //获得子元素宽度 var num_col= Math.floor(par_width / child_width); //一行显示多少列 var col_arr = []; //一列中所有元素相加后的高度 做多有num_col 个值 col_arr.length=0; $child_main.each(function(index,value){if(index < num_col){col_arr[index] = $(value).height();}else{var minH = Math.min.apply( null, col_arr );//数组pinHArr中的最小值minHvar min_index = $.inArray(minH,col_arr); //获得最小索引值//数组中最小元素的高 + 新块的高 + 15 空格距离col_arr[min_index] += $child_main.eq(index).height() + 15;$(value).css({ //设置元素显示位置position:"absolute",top:minH + 15 ,left : $child_main.eq(min_index).position().left});var maxH = Math.max.apply(null,col_arr);$par_main.height(maxH); // 更改父元素高度}});}//是否进行夹杂滚动条 当最后一张图片顶部 到 最后一张图片自身高度的一半作为分界线function checkscrollside(){var $child_main = $("#wf-main>li");var trigger_heigth = $child_main.last().get(0).offsetTop + $child_main.height() / 2;//滚动条高度var scroll_top = $(window).scrollTop();//获取页面宽度var docu_width = $(document).width();return (trigger_heigth <scroll_top + docu_width)?true:false;}5 每次都重新加载新图片的后台代码： //根据ajax 每次显示出来部分图片public function more_photo(){$offset = $_POST['offset'];$length = $_POST['length'];$id = M("Cate")->field("id")->where("name = '相册展示'")->select();$image_list = M("Blog")->field("content ,summary,title")->limit($offset,$length)->order("time desc")->where("cid = {$id[0]['id']}")->select();exit(json_encode($image_list));}
好啦，到此结束：
顺便秀秀战果了：
看着它洗涤一缕缕阳光，看着它映衬一片片星辉，
