JQUERY飞瀑流-研讨

JQUERY瀑布流--研讨
先看看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);