日期:2014-05-16  浏览次数:20342 次

JQUERY瀑布流--研讨
本帖最后由 net_lover 于 2013-04-08 12:38:23 编辑
先看看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";//执行重排