动态图片乱布局--图片部分解决

function limg (d) {
		var gd = {
			//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),
			out: (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),

		}
		limg.prototype.load = function (o) {
			
			if (o == undefined || o == null) {
				return null;
			}
			var out = $("<" + gd.out + "></" + gd.out + ">")
			if (gd.outercls != null) {
			  $(out).attr("class", gd.outercls);
			}
			if (gd.outercss != null) {
			  $(out).css(gd.outercss);
			}
			if (typeof o == "string") {
				//var out = document.createElement(gd.out);
				
				var vi = $("<img />")
				if (gd.css != null) {
					$(vi).css(gd.css);
					scale(vi,gd.scale);
				}
				if (gd.cls != null) {
					$(vi).attr("class",gd.cls);
				}
				$(vi).attr("src", o);
				$(vi).appendTo(out);
				return out;
			}
			if (typeof o == "object") {
				var imd = {
					id: typeof o.id == "string" ? o : null,
					src: typeof o.src == "string" ? o.src : gd.errosrc,
					alt: o.alt == undefined || o.alt == null ? "" : o.alt,
					width: o.width == undefined || o.width == null ? null : o.width,
					height: o.height == undefined || o.height == null ? null : o.height,
					//type: o.type == undefined || o.type == null ? "auto" : o.type,
					
					event: {
					  name: o == undefined || o == null ? "inner" : (typeof o.name == "string" ? o.name : "inner"),
					  mouseover: o.mouseover,
					  mouseout: o.mouseout,
					  mousemove: o.mousemove,
					  click: o.click,
            
					},
					loadevent: {
					    onready: o == undefined ? null : o.onready,
					    com: o == undefined ? null : o.com,
					    erro: o == undefined ? null : o.erro,
					    load: o == undefined ? null : o.load,

					  }
					//css: o.css == undefined || o.css == null ? gd.css : o.css,
					//cls: o.cls == undefined || o.cls == null ? gd.cls : o.cls,
					//styletype: o.styletype == undefined || o.styletype == null ? false : true,

				}
				var img = new Image();
				if (imd.loadevent.onready != null) { img.onreadystatechange=imd.loadevet.onready(img)};
				img.complete = function (e) {
				  
				  if (imd.loadevent.com != null) { imd.loadevent.com(e, img); }
				}
				img.onload = function (e) {
				  if (gd.css != null) {
				    $(img).css(gd.css);
				  }
				  if (gd.cls != null) {
				    $(img).attr("class", gd.cls);
				  }
				  if (imd.width != null && imd.height != null) {
				    $(img).css({ "height": imd.height + "px", "width": imd.width + "px" });
				  } else if (imd.height == null && imd.width) {
				    $(img).css({ "height": "auto", "width": imd.width + "px" });
				  } else if (imd.height != null && imd.width == null) {
				    $(img).css({ "width": "auto", "height": imd.height + "px" });
				  } else {
				    scale(img, gd.scale, imd.src);
				  }
				  $(out).css({ "height": $(img).css("height"), "width": $(img).css("width") });
				  if (imd.loadevent.load != null) { imd.loadevent.load(e, img); }
				}
				img.onerror = function (e) {
				  if (imd.loadevent.erro != null) { imd.loadevent.erro(e, img); }
				  if (img.src == gd.errosrc) { return;}
				  img.src = gd.errosrc;
				}
				img.src = imd.src;
				if (imd.id != null) {
				  img.id = imd.id;
				}
				img.alt = imd.alt == null ? imd.src : imd.alt;
				if (imd.event.name == "inner") {
				  if (imd.event.click != null) { img.onclick = function (e) { imd.event.click(e); } }
				  if (imd.event.mousemove != null) { img.onmousemove = function (e) { imd.event.mousemove(e); } }
				  if (imd.event.mouseout != null) { img.onmouseout = function (e) { imd.event.mouseout(e); } }
				  if (imd.event.mouseover != null) { img.onmouseover = function (e) { imd.event.mouseover(e); } }
				} else {
				  if (imd.event.click != null) { out.onclick = function (e) { imd.event.click(e); } }
				  if (imd.event.mousemove != null) { out.onmousemove = function (e) { imd.event.mousemove(e); } }
				  if (imd.event.mouseout != null) { out.onmouseout = function (e) { imd.event.mouseout(e); } }
				  if (imd.event.mouseover != null) { out.onmouseover = function (e) { imd.event.mouseover(e); } }
				}
				$(img).appendTo(out);
				
				return out;
			}
			return o;
		}
		limg.prototype.create = function (o) {

		  if (o == undefined || o == null) {
		    return null;
		  }
		  var out = $("<" + gd.out + "></" + gd.out + ">")
		  if (gd.outercls != null) {
		    $(out).attr("class", gd.outercls);
		  }
		  if (gd.outercss != null) {
		    $(out).css(gd.outercss);
		  }
		  if (typeof o == "string") {
		    //var out = document.createElement(gd.out);

		    var vi = $("<img />")
		    if (gd.css != null) {
		      $(vi).css(gd.css);
		      scale(vi, gd.scale);
		    }
		    if (gd.cls != null) {
		      $(vi).attr("class", gd.cls);
		    }
		    $(vi).attr("src", o);
		    $(vi).appendTo(out);

		    return out;
		  }
		  if (typeof o == "object") {
		    var imd = {
		      id: typeof o.id == "string" ? o : null,
		      src: typeof o.src == "string" ? o.src : gd.errosrc,
		      alt: o.alt == undefined || o.alt == null ? null: o.alt,
		      width: o.width == undefined || o.width == null ? null : o.width,
		      height: o.height == undefined || o.height == null ? null : o.height,
		      //type: o.type == undefined || o.type == null ? "auto" : o.type,

		      event: {
		        name: o == undefined || o == null ? "inner" : (typeof o.name == "string" ? o.name : "inner"),
		        mouseover: o.mouseover,
		        mouseout: o.mouseout,
		        mousemove: o.mousemove,
		        click: o.click,
		      }
		      //css: o.css == undefined || o.css == null ? gd.css : o.css,
		      //cls: o.cls == undefined || o.cls == null ? gd.cls : o.cls,
		      //styletype: o.styletype == undefined || o.styletype == null ? false : true,

		    }
		    var img = new Image();
		    img.src = imd.src;
		    if (imd.id != null) {
		      img.id = imd.id;
		    }
		    img.alt = imd.alt == null ? imd.src : imd.alt;
		    if (imd.event.name == "inner") {
		      if (imd.event.click != null) { img.onclick = function (e) { imd.event.click(e); } }
		      if (imd.event.mousemove != null) { img.onmousemove=function(e){imd.event.mousemove(e); } }
		      if (imd.event.mouseout != null) { img.onmouseout=function(e){ imd.event.mouseout(e); } }
		      if (imd.event.mouseover != null) { img.onmouseover = function (e) { imd.event.mouseover(e); } }
		    } else {
		      if (imd.event.click != null) { out.onclick = function (e) { imd.event.click(e); } }
		      if (imd.event.mousemove != null) { out.onmousemove = function (e) { imd.event.mousemove(e); } }
		      if (imd.event.mouseout != null) { out.onmouseout = function (e) { imd.event.mouseout(e); } }
		      if (imd.event.mouseover != null) { out.onmouseover = function (e) { imd.event.mouseover(e); } }
		    }
		    $(img).appendTo(out);
		    if (gd.css != null) {
		      $(img).css(gd.css);
		    }
		    if (gd.cls != null) {
		      $(img).attr("class", gd.cls);
		    }
		    if (imd.width != null && imd.height != null) {
		      $(img).css({ "height": imd.height + "px", "width": imd.width + "px" });
		    } else if (imd.height == null && imd.width) {
		      $(img).css({ "height": "auto", "width": imd.width + "px" });
		    } else if (imd.height != null && imd.width == null) {
		      $(img).css({ "width": "auto", "height": imd.height + "px" });
		    } else {
		      scale(img, gd.scale, imd.src);
		    }

		    $(out).css({ "height": $(img).css("height"), "width": $(img).css("width") });
		    return out;
		  }
		  return o;
		}
		function scale(o,scale){
			var w = $(o).width();
			var h = $(o).height();
      
			$(o).css({"height":Math.floor(h/scale) +"px","width":Math.floor(w/scale) +"px"});
			return o;
		}
	}

 

这里是初步的设计模式，但是样式还是很有问题，得修改完善后才能使用。这个方法也许会很难使用。。。