1 /* 2 | autoSerializePicture.js 自适应格式化图片 3 | auther : baichaohua/2017-09-21 4 +------------------------------------------------ */ 5 6 /* JSON 示例 7 [ 8 { 9 "imgSrc":"logo.png", //路径 10 "imgText":"示例图片1", //文本 11 "width":"185", //原始宽 12 "height":"185" //原始高 13 }, 14 { 15 "imgSrc":"1.jpg", 16 "imgText":"示例图片2", 17 "width":"1024", 18 "height":"640" 19 } 20 ] 21 */ 22 // 用法示例:addPictureAutoSize(json数据, 父级:document.getElementById('xxx')元素-默认body, ); 23 24 var autoSerializePicture = function (json, parent, callback) { 25 26 var obj = JSON.parse(json); 27 var totalDiv = document.createElement('div'); 28 totalDiv.id = 'autoSerializePictureBox'; 29 30 for (var i = 0; i < obj.length; i++) { 31 var box = document.createElement('div'); 32 var imgDIv = document.createElement('imgDIv'); 33 var p = document.createElement('p'); 34 var pv = document.createElement('p'); 35 var textNode = document.createTextNode(obj[i].imgText); 36 37 var width = obj[i].width * 300 / obj[i].height; 38 var height = obj[i].height * 300 / obj[i].width; 39 40 var img = new Image(); 41 img.src = obj[i].imgSrc; 42 43 if (obj[i].width / obj[i].height >= 1) 44 img.style.cssText = ' 300px; height: auto;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -' + height / 2 + 'px'; 45 else 46 img.style.cssText = ' auto; height: 300px;position: absolute;left: 50%;margin-left: -' + width / 2 + 'px;top: 50%;margin-top: -150px'; 47 48 imgDIv.style.cssText = '300px;height: 300px;position:relative;float: left; border: 1px solid #eee;padding: 8px;margin-top: 0px;'; 49 box.style.cssText = 'overflow: hidden;300px;height: 350px;position:relative;float: left;padding: 8px;margin-top: 0px;'; 50 p.style.cssText = 'text-align: center;margin-top: 324px;'; 51 pv.style.cssText = 'height: 40px;'; 52 53 imgDIv.appendChild(img); 54 p.appendChild(textNode); 55 box.appendChild(imgDIv); 56 box.appendChild(p); 57 box.appendChild(pv); 58 totalDiv.appendChild(box); 59 } 60 if(parent) 61 parent.appendChild(totalDiv); 62 else 63 document.getElementsByTagName('body')[0].appendChild(totalDiv); 64 65 if (callback) callback(json); 66 67 return { 68 //... 69 } 70 }
今天同事遇到一个问题,就是有很多图片,需要生成列表,但是图片大小需要自适应且居中,就写了一个方法。
直接上代码了,自适应格式化图片,图片效果: