https://larachecity.com/template/js/components.js

1//设置图片宽度
2function setImgWidth(curComInner, cropping, comColumn, imgPadding, imgMargin, columnWidth, columnHeight, imgBorder) {
3    var imgList = curComInner.find('div.gallery-img-in img');
4    var setImgCss = function (curImgItem) {
5        var imgWidth = curImgItem.width();
6        if (!(imgWidth > 0))
7            return false;
8        var imgHeight = curImgItem.height();
9        var widthThan = 100;
10		var heightThan = 100;
11		var temBorder=0;
12        var leftThan = 0;
13        var topThan = 0;
14		var temMargin = 0;
15		var tempadding = 0;
16		if (imgBorder > 0){
17		   temBorder = imgBorder;
18		}
19		if (imgPadding > 0){
20			tempadding += ( parseInt(imgPadding) + parseInt(temBorder)) * 2;
21		}
22		if(!cropping){
23			tempadding=0;
24		}
25		//if (imgMargin > 0){
26//			temMargin += parseInt(imgMargin) * 2;
27//		}
28		var newColumnWidth = columnWidth - temMargin - tempadding;
29		var newColumnHeight = columnHeight;
30        //正常格式
31        if (cropping == 0) {
32			newColumnWidth = columnWidth - temMargin;
33			imgWidth += tempadding;
34			imgHeight += tempadding;
35            if (imgWidth <= newColumnWidth && imgHeight <= newColumnHeight) {
36                widthThan = 'auto';
37				heightThan = 'auto';
38                leftThan = (((newColumnWidth - imgWidth) / 2) / newColumnWidth) * 100;
39                topThan = (((newColumnHeight - imgHeight) / 2) / newColumnHeight) * 100;
40            } else {
41                if (imgHeight > newColumnHeight) {
42                    imgWidth = (newColumnHeight / imgHeight) * imgWidth;
43                    imgHeight = newColumnHeight;
44                }
45                if (imgWidth > newColumnWidth) {
46                    imgHeight = (newColumnWidth / imgWidth) * imgHeight;
47                    imgWidth = newColumnWidth;
48                }
49                widthThan = ((imgWidth / newColumnWidth) * 100) + '%';
50				heightThan = ((imgHeight / newColumnHeight) * 100) + '%';
51                leftThan = (((newColumnWidth - imgWidth) / 2) / newColumnWidth) * 100;
52                topThan = (((newColumnHeight - imgHeight) / 2) / newColumnHeight) * 100;
53            }
54            curImgItem.css({'width': widthThan, 'height': heightThan, 'left': leftThan + '%', 'top': topThan + '%'});
55        } else {
56            //正方形和长方形
57            var imgNewHeight = imgHeight * (newColumnWidth / imgWidth);
58            if (imgNewHeight < newColumnHeight) {
59                imgWidth = (newColumnHeight / imgNewHeight) * newColumnWidth;
60                widthThan = (imgWidth / newColumnWidth) * 100;
61                leftThan = 0 - (((imgWidth - newColumnWidth) / 2) / newColumnWidth) * 100;
62            } else {
63                imgHeight = imgNewHeight;
64				heightThan = (imgHeight / newColumnHeight) * 100;
65                topThan = 0 - ((((imgHeight - newColumnHeight) / 2) / newColumnHeight) * 100);
66            }
67            curImgItem.css({'width': widthThan + '%', 'height': heightThan + '%', 'left': leftThan + '%', 'top': topThan + '%'});
68        }
69    }
70
71    // 判断图片加载的函数
72    var newIsImgLoad = function (_obj) {
73        if (_obj.height() === 0) {
74            var t_img;
75            t_img = setInterval(function () {
76                clearInterval(t_img);
77                newIsImgLoad(_obj);
78            }, 10);
79        } else {
80            setImgCss(_obj);
81        }
82    }
83
84    for (var i = 0; i < imgList.length; i++) {
85        var temImg = $(imgList[i]);
86        temImg.css({'width': 'auto'});
87        var newImg = new Image;
88        newImg.index = i;
89        newIsImgLoad($(imgList[i]));
90        newImg.src = temImg.attr('src');
91    }
92}