JQUERY瀑布流--研讨

[scscms太阳光]

先看看DEMO:http://down.scscms.com/scs/waterfall/index.html

jquery瀑布流布局：现在很流行的一种网页布局效果,瀑布流,随意、洒脱,个性十足,一种代表时尚潮流的网页设计风格。
http://www.sitejs.cn/code/down/jsdmview/waterfall/这里也有一个瀑布流效果，但个人觉得效果不好。它的排版原理是先统计n列，然后生成n个DIV。然后统计这排DIV的高度来分配图片的方法。开始加载感觉不出问题来。如果窗口变化几次排序就会乱了，而且打乱原有节点的排序，还有它是直接修改了原有节点结构，渲染过程中很卡甚至卡死。我觉得应该保持原有节点不要更改，只修改图片的div坐标位置达到排序功能即可。

========================javascript脚本======================

<script>
    $(function(){waterfall(".cell")});
    function waterfall(cls){
        if(!$(cls).length) return;//没有元素
        var con={
            obj:null,//图片div对象
            l:0, //总共数量
            w:214,//列宽
            s:10,//列间距
            list:0, //多少列
            h:1, //外div的高
            arr:[],//最后一排数组
            state:"loading" //状态 loading:加载图片中，ajax:正在发生ajax请求，finish:完成任务，load_resize:加裁过程中窗口变化(记录起来，加载完后处理)，resize:执行了窗口变化，reset:窗口变化排序中再次重排
        };
        con.obj=$(cls);//图片div对象
        con.l=con.obj.size();//统计共有多少个图片div
        con.list=Math.floor($("#container").width()/(con.w+con.s));//统计共有多少列
        fall_pic(0);
        $(window).resize(function(){
            var w=Math.floor($("#container").width()/(con.w+con.s));//重新统计共有多少列
            if(w!=con.list){
                //窗口变化造成列数发生了变化
                if("loading|load_resize|ajax".indexOf(con.state)!=-1){
                    //如果正在加载中,需要加载完后再执行重排
                    con.state="load_resize";
                }else{
                    //已经排完或者执行重排过程
                    con.list=w;
                    con.h=1;
                    if("finish"==con.state){
                        con.state="resize";//执行重排
                        fall_pic(0);
                    }else{
                        con.state="reset";//重排中的重排
                        //因为已经在重排过程中，不能再次调用函数。但可让编号再从0开始
                    }
                }
            }
        }).scroll(function(){
                    if("finish"==con.state){
                        var top=con.obj.last().offset().top;//最后一张图片的坐标
                        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离
                        var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度
                        if(windowHeight+scrollTop>=top){
                            con.state="ajax";//当滚动条拉到看到最后一张图片时
                            var html='';//实现案例中此改成ajax请求json或html,每次请求只增加一排
                            for(var i=con.l;i<con.l+con.list;i++){
                                html+='<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_'+('00'+i%162).slice(-3)+'.jpg" /><h3>'+i+' AJAX加载</h3><p>JQUERY瀑布流原理：每次排版取前一排最低的位置接着排，窗口改变后先计算一下列数有没有发生变化，变化后才重排。当下拉滚动条达到最后一个DIV的顶部时请求ajax生成新的图片插到底部执行继排功能。</p></div>';
                            }
                            $("#container").append(html);
                            con.obj=$(cls);//更新对象
                            var _i=con.l;//记录加载前的最后一个编号
                            con.l=con.obj.size();//统计现在共有多少张图片
                            fall_pic(_i);//接着加载前最一张图片排序;
                        }
                    }
                });
        function fall_pic(n){
            if("reset"==con.state){
                n=0;//处理重排中窗口再次变化
                con.state="resize";
            }
            //以下con.state可能存在的值为 loading,ajax,load_resize,resize
            if(n<con.l){
                var obj=con.obj.eq(n);//获取对象
                var x= 0,y=0;//对象坐标值
                if(n<con.list){
                    x=n*(con.w+con.s);//如果是第一排，y=0,x=宽度+列间距
                    con.arr[n]=obj;//把最后一排对象组成数组供后面用
                }else{
                    var _i=0;//查一下最后一排哪张图片的底部离顶部最高，然后在其后面插入新图片
                    for(var i= 0;i<con.list;i++){
                        var _top=con.arr[i].position().top+con.arr[i].outerHeight(true)+con.s;
                        if(0==y)y = _top;
                        if(y>_top){
                            _i=i;
                            y=_top;
                            x=i*(con.w+con.s);
                        }
                    }
                    con.arr[_i]=obj;//替换数组
                }
                if("resize"==con.state){
                    //如果是窗口变化，属于重排，不需要预加载图片
                    if(y==obj.position().top&&x==obj.position().left){                        
                        n++;//原位不变的跳过排序动画
                        fall_pic(n);
                    }else{
                        obj.animate({top:y,left:x},"fast",function(){
                            var _h=obj.position().top+obj.outerHeight(true);
                            if(_h>con.h){
                                con.h=_h;
                                $("#container").stop().animate({height:_h},"fast");//设置外框高
                            }
                            n++;
                            fall_pic(n);
                        });
                    }
                }else{
                    var img=new Image();
                    img.onload=function(){
                        obj.css({top:y,left:x}).fadeIn("slow",function(){
                            var _h=obj.position().top+obj.outerHeight(true);
                            if(_h>con.h){
                                con.h=_h;
                                $("#container").stop().animate({height:_h},"fast");//设置外框高
                            }
                            n++;
                            fall_pic(n);
                        });
                    };
                    img.onerror=function(){
                        //加载失败就替换图片，并省去设置外围div的高
                        obj.css({top:y,left:x}).fadeIn("slow",function(){
                            n++;
                            fall_pic(n);
                        }).find("img").attr("src","error.jpg");
                    };
                    img.src=obj.find("img").attr("src");
                }
            }else{
                setTimeout(function(){
                    if("load_resize"==con.state&&con.list!=Math.floor($("#container").width()/(con.w+con.s))){
                        con.state="finish";//如果是在预加载图片时改变了窗口大小需要重排的情况
                        $(window).resize();
                    }else{
                        con.state="finish";//延时一下，以防自动不断触发scroll
                    }
                },300)
            }
        }
    }
</script>

HTML部分请看demo,如果有问题或者优化方法请赐教！

[caiin]

虽然挺牛的，但是运行起来看着挺淡疼的 1.不管往上或者往下滚动，都会向下添加新的div，意思就是说不让我往上看啊，其实往下看也不太行，一滚动就更新了 2.完全用jq性能会不会比css出来的差，虽然jq效果可能比较炫 3.resize的时候很淡疼，如果当前你已经加载了N次方个div，那是不是要重新计算且重排N次方个次呢？

[scscms太阳光]

引用 54 楼 caiin 的回复:

虽然挺牛的，但是运行起来看着挺淡疼的 1.不管往上或者往下滚动，都会向下添加新的div，意思就是说不让我往上看啊，其实往下看也不太行，一滚动就更新了 2.完全用jq性能会不会比css出来的差，虽然jq效果可能比较炫 3.resize的时候很淡疼，如果当前你已经加载了N次方个div，那是不是要重新计算且重排N次方个次呢？

非常感谢提供意见： 1.这算是一个bug.原因是前面提到的$("body,html").scrollTop(y);//设置滚动条，与动画同步添加了这行代码造成的，现已经删除。 2.有点听不明白，是讲js设置css属性跟直接写css代码的区别吗 3.resize的问题，这个只是demo，适应全屏的效果。如果我们真实运用在项目里，div宽度是要固定的，那样就不存在resize事件。只有scroll事件。

[BoweirrKing]

厉害！！果断刘明！！ 在手机上，我用的遨游3浏览器，效果和在电脑上一样好！！！

[这个名字没人占用吧]

支持一下，，，，，

[脑中有飞鸟]

谢谢了，不知道这种瀑布流设计在小屏幕手机上面显示的怎么样？

[scscms太阳光]

JQUERY瀑布流--第二版本 看看DEMO :http://down.scscms.com/scs/waterfall/index2.html 改进：先一次性分配所有图片位置，然后全部一起做动画，效果更流畅，并精简几种状态。查看效果时多变化一下窗口大小，排版明显与第一版本有很大区别。

[xiaoxiangqing]

功能真的很强大

[llorch]

引用了，非常感谢！

[proer9988]

吃饱了撑的？

[u010304307]

[蜀南真人]

强帖留名......

[天空的泪]

很好 ……………………………………

[scscms太阳光]

结帖了，按顺序一个一分，不够的请见谅！

[litengfei0020]

大哥 请教个问题~~ 我用你这个效果做的 不过从数据库读数据以后，向下拉的时候有点有点卡，请问下这是什么原因？另外你用AJAX读数据那段代码可不可以给我看下~ 谢谢！！

引用 64 楼 xzy21com 的回复:

JQUERY瀑布流--第二版本 看看DEMO :http://down.scscms.com/scs/waterfall/index2.html 改进：先一次性分配所有图片位置，然后全部一起做动画，效果更流畅，并精简几种状态。查看效果时多变化一下窗口大小，排版明显与第一版本有很大区别。

[Sevenky]

又能看了！ 我换了些自己的图片 有时图片会加载失败 是什么情况呢？

[Sevenky]

demo无法看啊。。。

[rp1qfd]

引用 71 楼 xzy21com 的回复:

结帖了，按顺序一个一分，不够的请见谅！

问下，怎么结合AJAX呢？

[Se_先森_]

菜鸟路过。。学习了 真的很牛逼的效果

[yaerfeng]

可以下载这个：js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图，地址：http://www.zuidaima.com/share/1795084037721088.htm

[liuweihug22222]

jquery瀑布流插件Wookmark完整使用demo - http://www.suchso.com/projecteactual/jquery-Wookmark-use.html