JS照片墙代码实例

function FlowWall(debug, wdiv, ph, pw) {
    this.ifdebug = false;
    if (debug) this.ifdebug = true;
    this.pich = 82;
    if (ph) this.pich = ph;
    this.picw = 82;
    if (pw) this.picw = pw;
    if (this.ifdebug) this.ulstr = "<a href=\"#\" class=a style=\"opacity: 1;\"><img style=\"position: absolute; margin-bottom: 1px; margin-right: 1px;\" src=\"pic/reduct/20111112144113KgH8I046uykk.jpg\" /></a>";
    else this.ulstr = "<a href=a class=a  style=\"opacity: 1;\"><img style=\"position: absolute; margin-bottom: 1px; margin-right: 1px;\" src=img /></a>";
    this.picwall = $('#picwall');
    if (wdiv) this.picwall = wdiv;
    this.ww = 0;
    this.wh = 0;
    this.cols = 0;
    this.rows = 0;
    this.dcols = 0;
    this.datacols = 1;
    this.timer = null;
    this.url = "../Common/action/PicInfoAll.action.php";
    this.leftline = 0;
}
FlowWall.prototype.move = function(ww, wh) {
    if (ww) this.ww = ww;
    else this.ww = 100;
    if (wh) this.wh = wh;
    else this.wh = 164;
    this.picwall.empty();
    this.picwall.css('width', ww);
    this.picwall.css('height', wh);
    this.picwall.css('left', this.leftline);
    this.cols = parseInt(this.ww / this.picw + 2);
    this.dcols = this.cols;
    this.rows = parseInt(this.wh / this.pich + 1);
    this.initPicWall();
    this.moveWall(this.picwall);
}
FlowWall.prototype.initPicWall = function() {
    for (var i = 1; i <= this.cols; i++) {
        this.addCol(i);
    }
    this.setOpacity();
}
FlowWall.prototype.addCol = function(x) {
    if (!this.ifdebug) {
        var pobj = this;
        $.ajax({
            type: "POST",
            url: this.url,
            data: "page=" + x + "&perpagenum=" + this.rows,
            async: false,
            dataType: "json",
            success: function(msg) {
                var Reparr = msg.records;
                var pdir = msg.picdir;
                var Repstr = "";
                pobj.datacols = msg.totalpage;
                for (var i = 0; i < Reparr.length; i++) {
                    Repstr = pobj.ulstr.replace("href=a", "href=\"../#MS=VPIC&SB=ALL&pic=" + Reparr[i].id + "\"");
                    Repstr = Repstr.replace("src=img", "src=\"" + pdir + Reparr[i].pic + "\"");
                    pobj.addPic(x, (i + 1), Repstr);
                }
                if (x >= pobj.datacols) clearInterval(pobj.timer);
            }
        });
    } else {
        this.datacols = 100;
        for (var i = 1; i <= this.rows; i++) {
            this.addPic(x, i, this.ulstr);
        }
    }
}
FlowWall.prototype.delCol = function(x) {
    $('.col' + x).remove();
}
FlowWall.prototype.addPic = function(x, y, datastr) {
    var newobj = null;
    newobj = $(datastr.replace("class=a", "class=\"col" + x + "\""));
    newobj.find('img').css('left', (x - 1) * this.picw);
    newobj.find('img').css('top', (y - 1) * this.pich);
    this.picwall.append(newobj);
}
FlowWall.prototype.setOpacity = function() {
    var cs = this.cols - this.dcols;
    for (var i = 1; i <= this.dcols; i++) {
        var cc = (cs + i);
        var tobj = $('.col' + cc).eq(0).find('img');
        var cl = parseInt(tobj.css('left'));
        var cl = cl + parseInt(this.picwall.css('left'));
        var cl = Math.abs(cl - this.ww / 2);
        $('.col' + cc + " img").css('opacity', 1 - (cl / this.ww) * 1.7);
 
    }
 
}
FlowWall.prototype.moveWall = function(obj) {
    var fwobj = this;
    var step = -1;
    clearInterval(this.timer);
    var tleft = 0;
    var stepc = 0;
    if ((fwobj.datacols + 1) * fwobj.picw >= fwobj.ww) this.timer = setInterval(function() {
        if (Math.abs(stepc) >= fwobj.picw) {
            stepc = 0;
            fwobj.cols += 1;
            fwobj.addCol(fwobj.cols);
            fwobj.delCol(fwobj.cols - fwobj.dcols);
        }
        tleft = parseInt(obj.css('left'));
        obj.css('left', tleft + step + 'px')
        stepc += step;
        fwobj.setOpacity();
    },
    120);
}
FlowWall.prototype.stop = function() {
    clearInterval(this.timer);
}