动态图片乱布局--初步定型

function luan(luand,limgevent,loadimgevent,tagdata) {
  var windowW = $(window).width();
  var windowH = $(window).height();
  var gld;

  function init(d){
    gld = {
      boxid: d == undefined || d == null ? "body" : d.id == undefined || d.id == null ? "body" : d.id,
      type: d == undefined || d == null ? "cect" : d.type == undefined || d.type == null ? "cect" : d.type,
      count: d == undefined || d == null ? 4 : typeof d.count == "number" ? d.count : 5,
      height: d == undefined || d == null ? windowH : d.height == undefined || d.height == null ? windowH : d.height,
      width: d == undefined || d == null ? windowW : d.width == undefined || d.width == null ? windowW : d.width,
      inlinewidth: d == undefined || d == null ? Math.floor(windowW / 4) : d.inlinewidth == undefined || d.inlinewidth == null ? Math.floor(windowW / 4) : d.inlinewidth,
      inlineheight: d == undefined || d == null ? 300 : d.inlinewidth == undefined || d.inlinewidth == null ? 300 : d.inlineheight,
      scale: d == undefined || d == null ? 1 : d.scale == undefined || d.scale == null ? 1 : d.scale,
      outercls: d == undefined || d == null ? null : d.outercls == undefined ? null : d.outercls,
      outercss: d == undefined || d == null ? null : d.outercss == undefined ? null : d.outercss,
      inner: d == undefined || d == null ? "div" : d.inner == undefined || d.inner == null ? "div" : d.inner,
      innercls: d == undefined || d == null ? null : d.innercls == undefined ? null : d.innercls,
      innercss: d == undefined || d == null ? null : d.innercss == undefined ? null : d.innercss,
      imgcls: d == undefined || d == null ? null : d.imgcls == undefined ? null : d.imgcls,
      imgcss: d == undefined || d == null ? null : d.imgcss == undefined ? null : d.imgcss,
      errosrc: d == undefined || d == null ? null : d.errosrc == undefined ? null : d.errosrc,
      dely: d == undefined || d == null ? "css" : d.dely == undefined || d.dely == null ? "css" : d.dely,
      //sort: d == undefined || d == null ? "quence" : d.sort == undefined || d.sort == null ? "quence" : d.sort,
      tag: d == undefined || d == null ? null : d.tag == undefined ? null : d.tag,

    }
  }
  var glimg;
  function initglimg() {
    var imgd = {
      //id: (typeof d != "object") ? null : (typeof d.id == "string" ? d.id : null),
      css: gld.imgcss,//css
      cls: gld.imgcls,//className
      scale: gld.scale,
      outer: gld.inner,
      outercss: gld.innercss,
      outercls: gld.innercls,
      errosrc: gld.errosrc,

    }
    glimg = new limg(imgd);
  }
  init(luand);
  initglimg();
  luan.prototype.sort = function (ar) {
    
    //集合
    if (ar instanceof Array) {
      //sortarray();
      function sortarray() {
        function createDiv() {
          var v = document.createElement("div");
          $(v).attr("luan-be-out-box", gld.type);
          if (gld.outercss != null) { $(v).css(gld.outercss); }
          if (gld.outercls != null) { $(v).attr("class", gld.outercls) }
          $(v).appendTo($("#" + gld.boxid));
          return v;

        }
        function createDivs(c) {
          var aray = new Array(c);
          for (var i = 0; i < c; i++) {
            aray[i] = createDiv();
          }
          return aray;
        }
        var boxes = createDivs(gld.count);
        
        var imgloadEvent = {
          load: function (e, n, b, h, w, tag) {
            $(b).appendTo(tag.element);
            if (loadimgevent != undefined && loadimgevent != null && loadimgevent.load !=undefined && loadimgevent.load!=null) {
              loadimgevent.load(e, n,b, h, w, tag);
            }
          },
          complete: function (e) {
            if (loadimgevent != undefined && loadimgevent != null && loadimgevent.complete != undefined && loadimgevent.complete != null) {
              loadimgevent.complete(e);
            }
          },
          error: function (e) {
            if (loadimgevent != undefined && loadimgevent != null && loadimgevent.error != undefined && loadimgevent.error != null) {
              loadimgevent.error(e);
            }
          },
          readystatechange: function (e) {
            if (loadimgevent != undefined && loadimgevent != null && loadimgevent.readystatechange != undefined && loadimgevent.readystatechange != null) {
              loadimgevent.readystatechange(e);
            }
          }
        }
        for (var i = 0; i < ar.length; i++) {
          var tag = {
            element:boxes[i%(gld.count+1)],
            index:i,
            tagdata:tagdata,
          }
          glimg.load(ar[i], limgevent, imgloadEvent,tag);
        }
      }

      //type=="align-height"
      function sortTypeAlignHeight() {

        //创建所需div
        function createDiv() {
          var v = document.createElement("div");
          $(v).attr("luan-be-out-box", gld.type);//栓选标志
          if (gld.outercss != null) { $(v).css(gld.outercss); }
          if (gld.outercls != null) { $(v).attr("class", gld.outercls) }
          $(v).css({ "width": "100%" });
          //添加到外容器中

          $(v).appendTo($("#" + gld.boxid));
          
          return v;

        }
        var box;
        box = createDiv();
        var imgloadEvent = {
          load: function (e, n, b, h, w, tag) {
            var allwidth = 0;
            var v = $("#" + gld.boxid).find("div[luan-be-out-box=" + gld.type + "]");
            var box = $(v).eq(v.length - 1);
            //$(box).attr("luan-limg-be-box", "outer");
            $(box).find(gld.inner + "[luan-limg-be-box=outer]").each(function () { allwidth += $(this).width() });
            allwidth += $(b).width();
            if (allwidth > $(box).width()) {
              box = createDiv();
            }
            $(b).appendTo(box);
            if (loadimgevent != undefined && loadimgevent != null && loadimgevent.load != undefined && loadimgevent.load != null) {
              loadimgevent.load(e, n, b, h, w, tag);
            }
          },
          complete: function (e) {
            if (loadimgevent != undefined && loadimgevent != null && loadimgevent.complete != undefined && loadimgevent.complete != null) {
              loadimgevent.complete(e);
            }
          },
          error: function (e) {
            if (loadimgevent != undefined && loadimgevent != null && loadimgevent.error != undefined && loadimgevent.error != null) {
              loadimgevent.error(e);
            }
          },
          readystatechange: function (e) {
            if (loadimgevent != undefined && loadimgevent != null && loadimgevent.readystatechange != undefined && loadimgevent.readystatechange != null) {
              loadimgevent.readystatechange(e);
            }
          }
        }
        for (var i = 0; i < ar.length; i++) {
          //var v = $("#"+gld.boxid).find("div[luan-be-out-box="+gld.type+"]");
          //var tag = { element:$(v).eq(v.length-1), index: i };
          glimg.load(ar[i], limgevent, imgloadEvent);
        }
      }

      //实现
      if (gld.type == "align-width") { sortarray(); } else if (gld.type == "align-height") { sortTypeAlignHeight(); }
      

    }
    
  }

  luan.prototype.add = function (obj) {
    var box;
    var imgloadEvent;

    if (gld.type == "align-height") {
      imgloadEvent = {
        load: function (e, n, b, h, w, tag) {
        var allwidth = 0;
        var v = $("#" + gld.boxid).find("div[luan-be-out-box=" + gld.type + "]");
        var box = $(v).eq(v.length - 1);
        //$(box).attr("luan-limg-be-box", "outer");
        $(box).find(gld.inner + "[luan-limg-be-box=outer]").each(function () { allwidth += $(this).width() });
        allwidth += $(b).width();
        if (allwidth > $(box).width()) {
          box = createDiv();
        }
        $(b).appendTo(box);
        if (loadimgevent != undefined && loadimgevent != null && loadimgevent.load != undefined && loadimgevent.load != null) {
          loadimgevent.load(e, n, b, h, w, tag);
        }
        },
        complete: function (e) {
        if (loadimgevent != undefined && loadimgevent != null && loadimgevent.complete != undefined && loadimgevent.complete != null) {
          loadimgevent.complete(e);
        }
        },
        error: function (e) {
        if (loadimgevent != undefined && loadimgevent != null && loadimgevent.error != undefined && loadimgevent.error != null) {
          loadimgevent.error(e);
        }
        },
        readystatechange: function (e) {
        if (loadimgevent != undefined && loadimgevent != null && loadimgevent.readystatechange != undefined && loadimgevent.readystatechange != null) {
          loadimgevent.readystatechange(e);
        }
        }
      }
      var v = $("#" + gld.type).find("div[luan-be-out-box=align-height]");
      box = $(v).eq(v.length - 1);
      //var tag = { element: box, index: length };
      glimg.load(obj, limgevent, imgloadEvent);
      function createDiv() {
        var v = document.createElement("div");
        $(v).attr("luan-be-out-box", gld.type);//栓选标志
        if (gld.outercss != null) { $(v).css(gld.outercss); }
        if (gld.outercls != null) { $(v).attr("class", gld.outercls) }
        $(v).css({ "width": "100%" });
        //添加到外容器中

        $(v).appendTo($("#" + gld.boxid));

        return v;

      }
    } else if (gld.type == "align-width") {
      imgloadEvent = {
        load: function (e, n, b, h, w, tag) {
          $(b).appendTo(tag.element);
          if (loadimgevent != undefined && loadimgevent != null && loadimgevent.load != undefined && loadimgevent.load != null) {
            loadimgevent.load(e, n, b, h, w, tag);
          }
        },
        complete: function (e) {
          if (loadimgevent != undefined && loadimgevent != null && loadimgevent.complete != undefined && loadimgevent.complete != null) {
            loadimgevent.complete(e);
          }
        },
        error: function (e) {
          if (loadimgevent != undefined && loadimgevent != null && loadimgevent.error != undefined && loadimgevent.error != null) {
            loadimgevent.error(e);
          }
        },
        readystatechange: function (e) {
          if (loadimgevent != undefined && loadimgevent != null && loadimgevent.readystatechange != undefined && loadimgevent.readystatechange != null) {
            loadimgevent.readystatechange(e);
          }
        }
      }
      var v = $("#" + gld.boxid).find("div[luan-be-out-box=align-width]");
      var length = v[0].children.length;
      box = v[0];
      for (var i = 0; i < v.length; i++) {
        var vl = v[i].children.length;
        //length = this.children.length;
        if (length > vl) {
          length = vl;
          box = v[i];
          break;
        }
      }
      var tag = { element: box, index: length,tagdata:tagdata };
      glimg.load(obj, limgevent, imgloadEvent, tag);
    }

    
  }


  luan.prototype.img = function (d) {
    return new limg(d);
  }
  function limg(d) {
    var gd;
    function init(d) {
      var initgd = {
        //id: (typeof d != "object") ? null : (typeof d.id == "string" ? d.id : null),
        css: (d == undefined || d == null) ? null : (d.css == undefined || d.css == null ? null : d.css),//css
        cls: (d == undefined || d == null) ? null : (d.cls == undefined || d.cls == null ? null : d.cls),//className
        scale: (d == undefined || d == null) ? 1 : (typeof d.scale == "number" ? d.scale : 1),
        outer: (d == undefined || d == null) ? "div" : (typeof d.out == "string" ? d.out : "div"),
        outercss: (d == undefined || d == null) ? null : (d.outercss == undefined || d.outercss == null ? null : d.outercss),
        outercls: (d == undefined || d == null) ? null : (d.outercls == undefined || d.outercls == null ? null : d.outercls),
        errosrc: (d == undefined || d == null) ? null : (d.errosrc == undefined || d.errosrc == null ? null : d.errosrc),
        
      }
      gd = initgd;
    }
    init(d);
    var baseHeight;
    var baseWidth;
    limg.prototype.baseHeight = function () {
      return baseHeight;
    }
    limg.prototype.baseWidth = function () {
      return baseWidth;
    }
    limg.prototype.load = function (d, event, loadevent,tag) {
      //事件装饰器
      function eventBind(n, b) {
        var e = {
          name: event == undefined || event == null || event.name == undefined ? "inner" : event.name,
          mouseover: event == undefined || event == null || event.mouseover == undefined ? null : event.mouseover,
          mousemove: event == undefined || event == null || event.mousemove == undefined ? null : event.mousemove,
          mouseout: event == undefined || event == null || event.mouseout == undefined ? null : event.mouseout,
          click: event == undefined || event == null || event.click == undefined ? null : event.click,
        }

        if (e.name == "inner") {
          if (e.mouseover != null) { n.onmouseover = function (eve) { e.mouseover(eve, n) } }
          if (e.mouseout != null) { n.onmouseout = function (eve) { e.mouseout(eve, n) } }
          if (e.mousemove != null) { n.onmousemove = function (eve) { e.mousemove(eve, n) } }
          if (e.click != null) { n.onclick = function (eve) { e.click(eve, n) } }
        } else {
          if (e.mouseover != null) { b.onmouseover = function (eve) { e.mouseover(eve, b) } }
          if (e.mouseout != null) { b.onmouseout = function (eve) { e.mouseout(eve, b) } }
          if (e.mousemove != null) { b.onmousemove = function (eve) { e.mousemove(eve, b) } }
          if (e.click != null) { b.onclick = function (eve) { e.click(eve, b) } }
        }
      }

      function load_src() {
        //加载框
        var box = document.createElement(gd.outer);
        
        if (gd.outercls != null) { $(box).attr("class", gd.outercls) }
        if (gd.outercss != null) { $(box).css(gd.outercss) }
        //加载内容
        var nr = new Image();
        nr.onload = function () {
          baseHeight = $(nr).height();
          baseWidth = $(nr).width();
          
        }
        $(nr).attr("src", d);
        if (gd.css != null) { $(nr).css(gd.css) }
        if (gd.cls != null) { $(nr).attr("class", gd.cls) }
        //装饰 --事件装饰
        eventBind(nr, box);
        //luan 标志装饰
        $(box).attr("luan-limg-be-box", "outer");
        $(nr).attr("luan-limg-be-img", "inner");
        //打包
        $(nr).appendTo(box);
        return box;
      }
      function load_src_loadevent() {
        //加载框
        var box = document.createElement(gd.outer);
        if (gd.outercls != null) { $(box).attr("class", gd.outercls) }
        if (gd.outercss != null) { $(box).css(gd.outercss) }
        //加载内容
        var nr = new Image();
        nr.onload = function (e) {
          baseHeight = $(nr).height();
          baseWidth = $(nr).width();
          if (gd.css != null) { $(nr).css(gd.css) }
          if (gd.cls != null) { $(nr).attr("class", gd.cls) }
          if (loadevent.load != undefined && loadevent.load != null) { loadevent.load(e, nr,box,baseHeight,baseWidth,tag) };
        }
        //事件装饰  img加载
        nr.onreadystatechange = function (e) { if (loadevent.readystatechange!=undefined && loadevent.readystatechange != null) { loadevent.readystatechange(e, nr); } }
        nr.onerror = function (e) { if (loadevent.error!=undefined && loadevent.error != null) { loadevent.error(e, nr); } }
        nr.complete = loadevent.complete==undefined || loadevent.complete == null ? null : loadevent.complete;

        $(nr).attr("src", d);
        
        //装饰 --事件装饰
        eventBind(nr, box);

        //luan 标志装饰
        $(box).attr("luan-limg-be-box", "outer");
        $(nr).attr("luan-limg-be-img", "inner");
        //打包
        $(nr).appendTo(box);
        return box;

      }
      function load(loadmd) {
        //加载框
        var box = document.createElement(loadmd.outer);
        if (loadmd.outercls != null) { $(box).attr("class", loadmd.outercls) }
        if (loadmd.outercss != null) { $(box).css(loadmd.outercss) }
        //加载内容
        var nr = new Image();
        nr.onload = function () {
          baseHeight = $(nr).height();
          baseWidth = $(nr).width();

        }
        $(nr).attr("src", loadmd.src);
        $(nr).attr("alt", loadmd.alt)
        if (loadmd.id != null) { $(nr).attr("id", loadmd.id); }

        if (loadmd.css != null) { $(nr).css(loadmd.css) }
        if (loadmd.cls != null) { $(nr).attr("class", loadmd.cls) }
        //装饰 --事件装饰
        eventBind(nr, box);

        //luan 标志装饰
        $(box).attr("luan-limg-be-box", "outer");
        $(nr).attr("luan-limg-be-img", "inner");
        //打包
        $(nr).appendTo(box);
        return box;
      }
      function load_loadevent(loadmd) {
        //加载框
        var box = document.createElement(loadmd.outer);
        if (loadmd.outercls != null) { $(box).attr("class", loadmd.outercls) }
        if (loadmd.outercss != null) { $(box).css(loadmd.outercss) }
        //加载内容
        var nr = new Image();
        nr.onload = function (e) {
          baseHeight = $(nr).height();
          baseWidth = $(nr).width();

          if (loadmd.id != null) { $(nr).attr("id", loadmd.id); }

          if (loadmd.css != null) { $(nr).css(loadmd.css) }
          if (loadmd.cls != null) { $(nr).attr("class", loadmd.cls) }

          if (loadevent.load != undefined && loadevent.load != null) { loadevent.load(e, nr, box, baseHeight, baseWidth,tag) };
        }
        //事件装饰  img加载
        nr.onreadystatechange = function (e) { if (loadevent.readystatechange != undefined && loadevent.readystatechange != null) { loadevent.readystatechange(e, nr); } }
        nr.onerror = function (e) { if (loadevent.error != undefined && loadevent.error != null) { loadevent.error(e, nr); } }
        nr.complete = loadevent.complete == undefined || loadevent.complete == null ? null : loadevent.complete;

        $(nr).attr("src", loadmd.src);
        $(nr).attr("alt", loadmd.alt)
        //装饰 --事件装饰
        eventBind(nr, box);

        //luan 标志装饰
        $(box).attr("luan-limg-be-box", "outer");
        $(nr).attr("luan-limg-be-img", "inner");
        //打包
        $(nr).appendTo(box);
        return box;
      }

      var box;
      if (typeof d == "string") { 
        box = loadevent == undefined || loadevent == null ? load_src() : load_src_loadevent();
        
      } else if (typeof d == "object") {
        var lmd = {
          id: d.id == undefined ? null : d.id,
          src: d.src == undefined || d.src == null ? gd.errosrc : d.src,
          alt: d.alt == undefined ? null : d.alt,
          outer: d.outer == undefined || d.outer == null ? gd.outer : d.outer,
          outercss: d.outercss == undefined || d.outercss - null ? gd.outercss : d.outercss,
          outercls: d.outercls == undefined || d.outercls == null ? gd.outercls : g.outercls,
          css: d.css == undefined || d.css == null ? gd.css : d.css,
          cls: d.cls == undefined || d.cls == null ? gd.cls : d.cls,
          tag: d.tag == undefined ? null : d.tag,
          sort: d.sort == undefined ? null : d.sort,
        }
        box = loadevent==undefined || loadevent==null ?load(lmd):load_loadevent(lmd);
      }

      return box;
    }
  }
}

上面是主要的代码，这编写了两种模式，一种稳定宽度，一种稳定高度的，只有这么两种布局模型！

function addOneImage(src, le) {
    
    //加载布局事件

    var l = new luan(ld, null, le);
    
    l.add(src);
    //refreshEvent();
  }

  function addImages(a) {
    var index = 0;
    var le = {
      load: function (e, n, b, h, w, t) {
        var picscang = $("<li />").attr("class", "picScang").click(function () { SoucangAjax(this);});
        var piczan = $("<li/>").attr("class", "piczan").click(function () { zanAjax(this);});
        var outbox = $("<div />").addClass("picStyle").attr("rtid", $(tag).find("ID").eq(index).text());
        $(picscang).appendTo(outbox);
        $(piczan).appendTo(outbox);
        $(b).remove();
        $(b).appendTo(outbox);

        //C:\Users\sekeys\Desktop\Morgen\Morgen\js\dylayout.js
        //alert($(t.element).html());
        $(outbox).appendTo(t.element);

        //$(picscang).appendTo(outbox);
        $(createFooter(index)).appendTo(outbox);
        $(createComent(index)).appendTo(outbox);

        $(outbox).mouseover(function () {
          $(this).find(".picScang").toggle();
          $(this).find(".piczan").toggle();
        });
        $(outbox).mouseout(function () {
          $(this).find(".picScang").toggle();
          $(this).find(".piczan").toggle();
        });
        index++;
        if (index == a.length) {
          if (typeof callback == "function") {
            callback();
          }
          return;
        } else {
          addOneImage(a[index], le);
        }
      }
    }
    if (a instanceof Array) {
        addOneImage(a[index], le);
    }
  }
  function sort(a) {
    
    var le = {
      load: function (e, n, b, h, w, t) {
        var picscang = $("<li/>").attr("class", "picScang").click(function () { SoucangAjax(this);});
        var piczan = $("<li/>").attr("class", "piczan").click(function () { zanAjax(this); });
        var outbox = $("<div />").addClass("picStyle").attr("rtid",$(tag).find("ID").eq(t.index).text());
        $(picscang).appendTo(outbox);
        $(piczan).appendTo(outbox);
        $(b).remove();
        $(b).appendTo(outbox);


        //alert($(t.element).html());
        $(outbox).appendTo(t.element);

        //$(picscang).prependTo(b);
        $(createFooter(t.index)).appendTo(outbox);
        $(createComent(t.index)).appendTo(outbox);

        $(outbox).mouseover(function () {
          $(this).find(".picScang").toggle();
          $(this).find(".piczan").toggle();
        });
        $(outbox).mouseout(function () {
          $(this).find(".picScang").toggle();
          $(this).find(".piczan").toggle();

        });
        
      }
    }
    var l = new luan(ld, null,le);
    l.sort(a);
    if (typeof callback == "function") {
      callback();
    }
    //$(".picLine1").each(function () { if ($(".picLine1").index(this) > 0) $(this).attr("class", "picLine1 picLine2") });
  }
  var ele = document.getElementById(eleid);
  if(ele.childElementCount== 0){
    sort(srcs);
    $("#" + eleid).find(".picLine1").each(function () {
      if ($("#"+eleid+" .picLine1").index(this) > 0)
        $(this).attr("class", "picLine1 picLine2");
    });
  }else{
    addImages(srcs);
  }
  
}

这是主要显示的地方。代码！

主要效果！