简单的瀑布流框架（无后台交互）

最近一段时间小剧总是有总昏昏沉沉的感觉，总觉得需要醒醒脑。都说写作有利于保持冷静的头脑，这不，今天小剧就来写写之前做的一个简单的瀑布流效果的实现方法。

先简单介绍下小剧写的这个瀑布流吧：

不足：该瀑布流效果并没有与后台交互，仅仅是对前端页面的处理，算不上真正意义上的瀑布流；并未对图像延迟显示做处理，因此显示时会因网速而有所差异；函数没有经过封装对html布局有要求，且依赖jquery。

亮点：判断添加新内容位置的方法较为简单；对默认页面显示条数、滚屏自动显示条数与点击添加条数可独立设置；为每条新添加出来的信息设置id，方便有针对性设置动画。

布局介绍

源文件html并不是用分列布局来显示的，页面加载完成之后，前台分条拷贝单个信息至数组boxer中，再清空信息将布局转换为四列，整个瀑布流依赖四列的这个布局来完成的，下面是布局详解表：

代码执行过程

代码的核心是show()这个函数，其作用是添加信息，参数是添加信息的条数，具体添加到哪一列的依据是判断hA、hB、hC、hD的高度，自动添加高度最小的那一列，相等则往左一列添加，数组用尽则从头循环添加。

布局构建完成之后，调用show(8)函数在页面中添加八条信息。每当页面滚动至底部300像素内后（这里用定时器清除过多的滚动事件函数），自动添加四条信息。

当整个页面信息超过四十条时，滚动就不再添加信息了，这时会显示【显示更多】按钮，每点击一次添加八条信息。

整个效果的执行过程大致就是这样，css这里就不多说了，直接看代码吧。至于JS部分，小剧只是把需要的功能函数写出来，具体的优化一直是小剧的弱项，可能做得不是很好，希望你能给小剧提点意见，不甚感激。

前面也说了，本效果从始至终并没有与后台交互。关于后台的操作，小剧正在学习之中，希望我能尽快在服务器交互方面有所成长，大家期待吧！

JS部分代码

 function waterfall(){
    var box = $('#waterfall').children("dl");
    var boxer = [];//存放内容的数组
    var timer;
    var total = box.length;
    var dlNo=0;//页面中已经生成的dl数量
    var i=0;//源dl的索引值
    for(i;i<total;i++){boxer.push(box.eq(i).html());}//获取源内容，生成数组
    $('#waterfall').html("<div class='col' id='colA'></div><div class='col' id='colB'></div><div class='col' id='colC'></div><div class='col' id='colD'></div><div id='addMore'>显示更多</div>");//生成新的框架结构
    var colA=$('#colA');
    var colB=$('#colB');
    var colC=$('#colC');
    var colD=$('#colD');
    var hA,hB,hC,hD;//四栏的高度
    function show(showdlNo){//添加新内容，参数为添加的数量
        for(var n=0;n<showdlNo;n++){
            hA = colA.height();
            hB = colB.height();
            hC = colC.height();
            hD = colD.height();
            if(i==total){i=0}
            if(hA<=hB&&hA<=hC&&hA<=hD){
                colA.append("<dl id='wf"+dlNo+"'>"+boxer[i++]+"</dl>");
            }else if(hB<=hC&&hB<=hD){
                colB.append("<dl id='wf"+dlNo+"'>"+boxer[i++]+"</dl>");
            }else if(hC<=hD){
                colC.append("<dl id='wf"+dlNo+"'>"+boxer[i++]+"</dl>");
            }else{
                colD.append("<dl id='wf"+dlNo+"'>"+boxer[i++]+"</dl>");
            }
            $('#wf'+dlNo++).fadeIn('300');
        }
    }
    show(8);//页面初始显示八个dl
    $(window).scroll(function(){
        if(dlNo<40){//设置页面中的滚动可显示dl的数量
            clearTimeout(timer);
            timer = setTimeout(function(){
                if($(document).scrollTop()+$(window).height()>$(document).height()-300){show(4);}<br />
            },500);
        }else{$('#addMore').fadeIn('200');}
    });
    $('#addMore').click(function(){show(8)});
} 

CSS部分代码

#waterfall{margin-top:20px;overflow:hidden;}
#waterfall .col{width:25%;float:left;}
#waterfall dl{border:1px solid #bbb;background:#fff;margin:0px 10px 20px;display:none;border-radius:8px;overflow:hidden;box-shadow:2px 5px 10px #ccc;}
#waterfall dl dt{line-height:50px;font-size:18px;color:#05a;text-align:center;}
#waterfall dl dd{padding:10px;overflow:hidden;border-top:1px dashed #ddd;}
#waterfall dl dd img{width:180px;border:5px solid #eee;display:block;margin:auto;}
#waterfall dl dd p{font-size:14px;color:#666;margin:0px}
#waterfall dl dd.more{padding:0px;text-align:center;line-height:40px;font-size:16px;}
#waterfall dl a{display:block;color:#aaa;text-align:center;}
#waterfall dl a:hover{background:#f5f5f5;color:#05c}
#waterfall dl dt a{color:#05a;}