js 瀑布流布局插件（仅供参考，逐渐完善中。。。）

此处仅为部分代码，如想查看完整版可pm我~~
<div id="wrap" class="wrap"></div>
<script language="javascript" src="waterfall.js"></script><!-- content_container end -->
<script language="javascript">
window.onload = function(){
    ytj.$id("wrap"),"mode"
    WarterFall.animeta({
        'target':ytj.$id("wrap"),
        'margin':10,
        'childClass':'mode',
        'dataString':jsonString
    });    
}
</script>

 

/**
 * @version    2012.04.09
 * @author    lq
 * 本插件使用了一些自定义方法，并且不在此插件内，如外部使用请修改这些方法或自定义这次方法
 **/
var WarterFall = (function(){
    var Animeta = function(o){
        this.setting  =  typeof o==="object"?o:{};
        this.target   =  this.setting.target || 'waterFall';
        this.childClass = this.setting.childClass || 'mode';
        this.width    =  this.setting.width || 200;
        this.margin   =  this.setting.margin || 20;
        this.dataString = this.setting.dataString || null;
        this.sumChild =  0;
        this.t        =  0;
        this.h        =  [];
        this.startH   =   0;
        this.newBox   =  [];
        this.scrollLoadNum= this.setting.srollLN || 9;
        this.pageNum  =  0;
        this.ms;
        //执行
        this.init();
        this.handleEvent();
    };
    //事件侦听函数
    function attachEvent(el,Event,fn){
            el = el || window;
            if(el.addEventListener){
                el.addEventListener(Event,fn,false);
            }else if(el.attachEvent){
                el.attachEvent('on'+Event,fn);
            }    
    }
    Animeta.prototype = {
        init:function(){
            this.obj = document.getElementById(this.target);    
            this.addList();
        },
        handleEvent:function(){
            var that = this;
            attachEvent(window,'scroll',function(){
                clearTimeout(this.ms);
                this.ms= setTimeout(function(){
                    var a=document.body.scrollHeight-185;
                    var b=document.documentElement.clientHeight;
                    var c=document.documentElement.scrollTop + document.body.scrollTop;
                    if((c+b+100>=a)){
                        that.addList();
                    } 
                    else if((c+b>=a)){
                        that.addList();
                    }
                    else {return}
                },10);    
            });
        },
        
        changeJeson:function(json){
            var jsonString = json; // 获取服务器返回的json字符串
            if(typeof jsonString != "object"){
                var jsonObj = null;
                try {
                    jsonObj = eval('(' + jsonString + ')'); // 将json字符串转换成对象
                    return jsonObj;
                } catch (ex) {
                    return null;    
                }
            }    
        },
        addList:function(){
            this.newBox=[];
            var items_N = this.changeJeson(this.dataString);    
            for(var i=0;i<items_N.items.length;i++){
                var ImgSrc = items_N.items[i].src_thumb_url;
                if(ImgSrc){
                    this.callBackAdd(items_N.items[i].height, ImgSrc , items_N.items.length, i ,items_N.items[i]);    
                }else{
                    this.callBackAdd('', '' , items_N.items.length, i ,items_N.items[i]);    
                }
            }
        },
        callBackAdd:function(height,ImgSrc,length,i,dataJson){
                if(height!=""&&ImgSrc!=""){
                    var grid = this.imgCreate(height,ImgSrc, length, i ,dataJson);
                }else if(dataJson.cat){
                    var grid = this.catsCreat(height,ImgSrc, length, i ,dataJson);
                }else{
                    var grid = this.userInfo(height,ImgSrc, length, i ,dataJson);    
                }
                grid.style.top = this.startH +"px";
                //透明度
                opacity(grid,0);
                this.target.appendChild(grid);
                if(ytj.$id("loading").style.top != '0'){
                    ytj.$id("loading").style.top="0";    
                }
                this.newBox[i]= grid;
                this.t++;
                if(this.t>length-1){
                    this.sortNew();
                    this.t=0;
                    ytj.$id("loading").style.display="none";
                }
        },
        imgCreate:function(height,ImgSrc, length, i ,dataJson){
            var shopId = dataJson.id;
            var title = dataJson.title;
            var price = dataJson.price;
            var shopUrl = dataJson.url;
            //喜欢
            var fav_total = dataJson.favority.total != null ? dataJson.favority.total : 0;
            var isfav =dataJson.isfav;
            var favClass="";
            var delurl = dataJson.delurl;
            if(isfav&&isfav=='1'){
                favClass="after_fav";
            }
            if(dataJson.favority.last_fav_user_info != null){
                var last_fav_uid =  dataJson.favority.last_fav_user_info.uid;
                var last_fav_username = dataJson.favority.last_fav_user_info.username;
                var last_fav_avatar = dataJson.favority.last_fav_user_info.avatar;
                var last_fav_time = dataJson.favority.last_fav_user_info.favtime;
            }else{
                var last_fav_uid = last_fav_username = last_fav_avatar = last_fav_time ="";
            }
            //评论
                var comments_total = dataJson.comments.total != null ? dataJson.comments.total : 0;
                var comments_con = dataJson.comments.content;
            if(dataJson.comments.last_comment_user_info != null){
                var comments_uid =dataJson.comments.last_comment_user_info.uid;
                if(!comments_uid){
                    comments_uid="";    
                }
                var comments_username = dataJson.comments.last_comment_user_info.username;
                var comments_avatar = dataJson.comments.last_comment_user_info.avatar;
            }else{
                var comments_uid =     comments_username = comments_avatar = "";
            }
            //创建
            var div = document.createElement("div");
            div.id = "mode_"+shopId;
            div.className = this.childClass+" "+"popup_in"; //预留接口
            var str="<div class='ctn' id='c_"+shopId+"'>";
                str+= "<div class='pic'>";
                if(delurl!=""){
                    str+='<div class="deltShop" id="del_'+shopId+'" delurl="'+delurl+'" onclick="adminDel(this)"></div>';    
                }
                str+="<a href='"+shopUrl+"' target='_blank'><img src="+ImgSrc+" height='"+height+"' alt='"+title+"' title='"+title+"' /></a><span class='price'>￥"+price+"</span>";
                str+="<div class='fav_com_btn'><a href='javascript:void(0)' class='fav_btn "+favClass+"' id='fav_b_"+shopId+"'>喜欢</a><a href='javascript:void(0)' class='comment_btn' id='com_b_"+shopId+"'>评论</a></div>";
                str+="</div>";
                str+="<div class='fav_comment'><span class='fav "+favClass+"' id='fav_num_"+shopId+"'><cite class='fav_cite' id='fav_cite"+shopId+"'>喜欢</cite><em>"+fav_total+"</em></span><span class='comment' id='"+comments_uid+"'><span id='com_txt_"+shopId+"' class='comment_btn'>评论：</span><em><a href='"+shopUrl+"' target='_blank'>"+comments_total+"</a></em></span></div>";
            if(last_fav_uid !=""){
                str+="<dl class='last_fav' id='last_fav_"+shopId+"' isfav='"+isfav+"'>";
                str+="<dt>";
                if(last_fav_uid!=""||last_fav_uid!="undefined"){
                    str+="<a href='/Home/Goods/profile/u/"+last_fav_uid+"' target='_blank'><img src='"+last_fav_avatar+"' /></a>";
                }else{
                    str+="<a href='javascript:void(0)'><img src='"+last_fav_avatar+"' /></a>";    
                }
                str+="</dt>";
                str+="<dd class='fav_name'>";
                if(last_fav_uid!=""||last_fav_uid!="undefined"){
                    str+="<a href='/Home/Goods/profile/u/"+last_fav_uid+"' target='_blank'>"+last_fav_username+"</a>";
                }else{
                    str+="<a href='javascript:void(0)'>"+last_fav_username+"</a>";
                }            
                str+="</dd><dd class='fav_time'>"+last_fav_time+"</dd>";
                
            }else{
                str+="<dl class='last_fav' id='last_fav_"+shopId+"' style='display:none'>";
            }
            str+="</dl>";
            if(comments_username !=""){
                str+="<div class='last_comments' id='last_com_"+shopId+"'>";
                str+="<span>";
                if(comments_uid!=""){
                    str+="<a href='/Home/Goods/profile/u/"+comments_uid+"' target='_blank'>"+comments_username+"</a>";
                }else{
                    str+="<a href='javascript:void(0)'>"+comments_username+"</a>";    
                }
                str+=":</span>"+comments_con+"</div>";    
            }else{
                str+="<div class='last_comments' id='last_com_"+shopId+"' style='display:none'></div>";
            }
            str+="</div>";
            str+="<div class='projection'></div>";
            
            div.innerHTML =  str;    
            return div;    
        },
        catsCreat:function(height,ImgSrc, length, i ,dataJson){
            //创建
            var div = document.createElement("div");
            div.id = "catgory";
            div.className = this.childClass+" "+"popup_in"; //预留接口
            var str="<div class='ctn'>";
            var cats = dataJson.cat.cats;
            var tags = dataJson.cat.tags;
            if(cats!=""){
                str += '<div class="rm_box"><ul class="hot_box">';
                for(var j=0;j<cats.length;j++){
                    var classname;
                    var currentName;
                    if(cats[j].hot == 1){
                        classname ="hot";    
                    }else{
                        classname="";    
                    }
                    if(cats[j].current == 1){
                        currentName="cur";    
                    }else{
                        currentName="";    
                    }
                    str += '<li class="'+classname+'" id="'+cats[j].id+'"><a class="'+currentName+'" title="'+cats[j].name+'" href="'+cats[j].url+'"><span>'+cats[j].name+'</span></a></li>';    
                }
                str+='</ul><div class="clear"></div>';
                str+='</div>';
            }
            if(tags!=""){
                for(var y=0;y<tags.length;y++){
                    if(tags[y].ico!=""){
                        str+='<h2 class="season" style="background-image:url('+tags[y].ico+')">'+tags[y].name+'</h2>';
                    }else{
                        str+='<h2 class="season">'+tags[y].name+'</h2>';
                    }
                    str += '<div class="bq_box"><ul class="tag_box">';
                    for(var h=0;h<tags[y].tag.length;h++){
                        var classname,currentname;
                        if(tags[y].tag[h].hot == 1){
                            classname ="hot";    
                        }else{
                            classname="";    
                        }
                        if(tags[y].tag[h].current == 1){
                            currentname ="cur";    
                        }else{
                            currentname="";    
                        }
                        str += '<li class="'+classname+'" id="'+tags[y].tag[h].id+'"><a class="'+currentname+'" title="'+tags[y].tag[h].name+'" href="'+tags[y].tag[h].url+'"><span>'+tags[y].tag[h].name+'</span></a></li>';    
                    }
                    str+='</ul><div class="clear"></div>';
                    str+='</div>';
                }
                str+='</div>';
            }
            str+="<div class='projection'></div>";
            div.innerHTML =  str;    
            return div;    
        },
        userInfo:function(height,ImgSrc, length, i ,dataJson){
            var uImg = dataJson.avatar;
            var uFavs = dataJson.favsum;
            var uComs = dataJson.comsum;
            var uName = dataJson.username;
            var div = document.createElement("div");
                div.id = "u-center";
                div.className = childClass+" "+"popup_in"; //预留接口
                var str="<div class='ctn'>";
                //内容部分开始
                str+="<div class='pic'><img width='210' height='150' src='/App/Tpl/Home/Default/Public/images/transparent.gif' style='background-image:url("+uImg+")' /></div>";
                str+="<p class='uName'>"+uName+"</p>";
                str+="<div class='uInfo'><span class='uFav'>喜欢<em>"+uFavs+"</em>件宝贝</span><span class='uCom'>评论<em>"+uComs+"</em>件宝贝</span></div>"
                //内容部分结束
                str+="</div>";
                div.innerHTML =  str;
            return div;    
        },
        sortNew:function(){
            var box = this.newBox;
            this.postPosition("add");//执行定位函数
            for(var i = 0; i < box.length; i++) {
                box[i].style.visibility = "visible"; //定位完毕后显示新增节点
            }
            setTimeout("isAjax=0",1000);
            this.startH = this.h[0];
            //添加鼠标滑过事件
            var childrenN = ytj.getElementByClass('pic');
            for(var k=0;k<childrenN.length;k++){
                childrenN[k].onmouseover = function(){
                    ytj.addClassName(this.parentNode.parentNode,'hover');
                }    
                childrenN[k].onmouseout = function(){
                    ytj.removeClassName(this.parentNode.parentNode,'hover');
                }
            }    
        },
        sortAll:function(){
            this.h = []; //每次重排都要重置列高度记录数组
            var el = this.target;
            var childTagName = this.childClass;
            var box = ytj.getElementByClass(childTagName,el);
            /*//if(loading&&el.childNodes.length<=0){
            //    getMore(ytj.$id("wrap"),"mode");    
            //}
            if(el.childNodes.length<=0&&pageNum>scrollLoadNum){
                if(ytj.$id("default_like")){
                    ytj.$id("default_like").style.display="block";    
                }    
            }*/
            postPosition("re");//执行定位函数
        },
        postPosition:function(op){
            var box = this.newBox;
            var el  = this.target;
            if(box[0]=='undefined'){return false;}
            if(!box[0]) return false;
            var minH = box[0].offsetHeight,
            boxW = box[0].offsetWidth+this.margin;
            n = (el.parentNode.offsetWidth +this.margin) / boxW | 0; //计算页面能排下多少Pin
            el.style.width = n * boxW - this.margin + "px";
            el.style.visibility = "visible";
            for(var i = 0; i < box.length; i++) {//排序算法，有待完善
                boxh = box[i].offsetHeight; //获取每个Pin的高度
                if(i < n && op =="re" || (i < n && op =="add" && this.h.length<n)) { //第一行特殊处理
                        this.h[i] = boxh;
                        box[i].style.top = 0 + 'px';
                        box[i].style.left = (i * boxW) + 'px';
                        opacity(box[i],1);
                } 
                else { 
                        minH = Array.min(this.h); //取得各列累计高度最低的一列
                        minKey = getarraykey(this.h, minH);
                        this.h[minKey] += boxh+this.margin ; //加上新高度后更新高度值
                        box[i].style.top = minH+this.margin + 'px';
                        box[i].style.left = (minKey * boxW) + 'px';
                        opacity(box[i],1);
                }
            }
            maxH = Array.max(this.h); 
            maxKey = getarraykey(this.h, maxH);
            el.style.height = this.h[maxKey] +"px";
        }
        
    };
    //
    Array.min=function(array){
        return Math.min.apply(Math,array);
    }
    Array.max=function(array){
        return Math.max.apply(Math,array);
    }
    /* 返回数组中某一值的对应项数 */
    function getarraykey(s, v) {
            for(k in s) {
                    if(s[k] == v) {
                            return k;
                    }
            }
    }
    //透明度
    function opacity(obj,num){
        if(window.ActiveXObject){
            obj.style.filter = "alpha(opacity="+(num*100)+")";    
        }else{
            obj.style.opacity = num;    
        }    
    }
    //
    return {
        animeta:function(o){
            var tt = new Animeta(o);        
        }        
    }    
})();