js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”。
js:
//20180315
//瀑布流显示图片
var WaterfallImg = {
option: {
maxWidth: 850,//每一行固定的总的宽度
ifBeyond: 1,//加载到最后一张图超出范围时,参数值 0:超出一定范围(beyondMaxWidth)时使用1、没有超过时使用2 。 1:当前行张数减1放大。2:或不变张数缩小
beyondMaxWidth: 100,//最后一张图超出最大范围
//frameWidth: 200,//相框初始宽度(暂未实现固定行高)
frameHeight: 200,//相框初始高度
rightPadding: 0,//边距 ()
imgs: [], //图片集合[{url:"http://img1.youzy.cn/content/media/thumbs/p00174603.jpeg",FrWidth:554,FrHeight:418}] 。url :这个属性名,使用urlKey参数的值。 FrWidth 相框宽度。FrHeight 相框高度。相框宽高不传时,使用图片原始尺寸
urlKey: "url",//图片在obj中的 路径字段属性名称
},
result: {
rightPadding: 0,
rows: [{ row: 1, RowHeight: 0, imgs: [] }],//[{row:1,RowHeight:60,imgs:[{url:"",FrWidth:50,obj:{}}]}] row:行。RowHeight:当前行高度。 imgs:当前行要放置的图片.obj 传入参数中的完整对象
html: ""
},
//调用方法
executionShow: function (inputOption, back) {
WaterfallImg.option = $.extend(WaterfallImg.option, inputOption);
//先确定所有图宽高
//未加载的图片执行加载
for (var i = 0; i < WaterfallImg.option.imgs.length; i++) {
WaterfallImg._setImgOldWH(WaterfallImg.option.imgs[i]);
}
window.onload = function () {
for (var i = 0; i < WaterfallImg.option.imgs.length; i++) {
//使用url获取图片 宽高
WaterfallImg.option.imgs[i] = WaterfallImg._setImgOldWH(WaterfallImg.option.imgs[i]);
//
if (WaterfallImg.option.rightPadding > 0) {
WaterfallImg.option.imgs[i].FrWidth = WaterfallImg.option.imgs[i].FrWidth + WaterfallImg.option.rightPadding;
}
}
//执行瀑布流计算
WaterfallImg._executionShow(WaterfallImg.option);
//开始回调
if (back) {
back(WaterfallImg.result);
}
};
},
//执行瀑布流显示
_executionShow: function (inputOption) {
//执行瀑布流显示
WaterfallImg.result.rightPadding = WaterfallImg.option.rightPadding;
var result = WaterfallImg.result;
var NowWidth = WaterfallImg.option.maxWidth;//当前行剩余宽度
var row = 1;// 当前行
//遍历所有图
for (var i = 0; i < WaterfallImg.option.imgs.length; i++) {
var NewWidth = WaterfallImg._getWidht(WaterfallImg.option.imgs[i]);//当前相框新宽度
//按比例计算出的新宽度 超过最大限制,当前图单独一行
if (NewWidth > WaterfallImg.option.maxWidth) {
if (i != 0) {
//上一行空白补足
var NewHeight = WaterfallImg._getRowHeight(WaterfallImg.option.maxWidth - NowWidth);
result.rows[row - 1].RowHeight = NewHeight;
//换行
row++;
result.rows.push({ row: row, imgs: [] });
NowWidth = WaterfallImg.option.maxWidth;
}
//当前图单独一行
result.rows[row - 1].imgs.push({
url: WaterfallImg.option.imgs[i].url,
FrWidth: WaterfallImg.option.maxWidth,
obj: WaterfallImg.option.imgs[i]
});
result.rows[row - 1].RowHeight = WaterfallImg._getRowHeight(NewWidth);
//换行
if (i < WaterfallImg.option.imgs.length - 1) {
row++;
result.rows.push({ row: row, imgs: [] });
}
continue;
}
//超出剩余宽度
if (NewWidth > NowWidth) {
//换行
//超过时采用换行放大行策略,或者ifBeyond==0时并 超过超出范围
if (WaterfallImg.option.ifBeyond == 1 || (WaterfallImg.option.ifBeyond == 0 && NewWidth - NowWidth > WaterfallImg.option.beyondMaxWidth)) {
//根据剩余空白宽度,放大当前行,得到高度
var NewHeight = WaterfallImg._getRowHeight(WaterfallImg.option.maxWidth - NowWidth);
result.rows[row - 1].RowHeight = NewHeight;
//当前图 换到下一行
i--;
//换行
row++;
result.rows.push({ row: row, imgs: [] });
NowWidth = WaterfallImg.option.maxWidth;
continue;
} else {
//当前图作为当前行的最后一张图
result.rows[row - 1].imgs.push({
url: WaterfallImg.option.imgs[i].url,
FrWidth: NewWidth,
obj: WaterfallImg.option.imgs[i]
});
//根据超出宽度,缩小当前行,得到高度
var NewHeight = WaterfallImg._getRowHeight(WaterfallImg.option.maxWidth + NewWidth - NowWidth);
result.rows[row - 1].RowHeight = NewHeight;
//换行
row++;
result.rows.push({ row: row, imgs: [] });
NowWidth = WaterfallImg.option.maxWidth;
}
} else {
//宽度没有超出 仍在当前行
result.rows[row - 1].imgs.push({
url: WaterfallImg.option.imgs[i].url,
FrWidth: NewWidth,
obj: WaterfallImg.option.imgs[i]
});
NowWidth = NowWidth - NewWidth;
//最后一个
if (i >= WaterfallImg.option.imgs.length - 1) {
result.rows[row - 1].RowHeight = WaterfallImg.option.frameHeight;
}
}
}
//根据高缩放比例 设置每一个单独图的宽度
result.rows = WaterfallImg._setImgWidth(result.rows);
//设置显示的html
result.html = WaterfallImg._setHtml(result.rows);
WaterfallImg.result = result;
return WaterfallImg.result;
},
_getWidht: function (img) {
//当前相框在当前高度上对应的宽度
img.FrWidth = (WaterfallImg.option.frameHeight / img.FrHeight) * img.FrWidth;
img.FrHeight = WaterfallImg.option.frameHeight;
return img.FrWidth;
},
_getHeight: function (img) {
//相框宽度超过行的最大宽度,固定相框宽度,计算高度
img.FrHeight = (WaterfallImg.option.maxWidth / img.FrWidth) * img.FrHeight;
img.FrWidth = WaterfallImg.option.maxWidth;
return img.FrHeight;
},
_getRowHeight: function (RowWidth) {
//根据宽度比例 获取行的新高度
return (WaterfallImg.option.maxWidth / RowWidth) * WaterfallImg.option.frameHeight;
},
_setImgWidth: function (rows) {
//根据高缩放比例 设置每一个单独图的宽度
for (var i = 0; i < rows.length; i++) {
var proportion = rows[i].RowHeight / WaterfallImg.option.frameHeight;
for (var j = 0; j < rows[i].imgs.length; j++) {
rows[i].imgs[j].FrWidth = rows[i].imgs[j].FrWidth * proportion - WaterfallImg.option.rightPadding;
}
}
return rows;
},
_setHtml: function (rows) {
//设置显示的html
var html = "";
return html;
},
_isSetImgOldWH: false,//是否要设置图片原始高度
_setImgOldWH: function (img) {
//根据url得到图片原始高度宽度
var imgobj = new Image();
imgobj.src = img[WaterfallImg.option.urlKey];
if (!imgobj.complete) {
WaterfallImg._isSetImgOldWH = true;
imgobj.style.display = 'none';
document.body.appendChild(imgobj);
///只有在加载之后才能得到 window.onload
}
//文档已加载,可以直接获取
if (imgobj.naturalWidth > 0 || imgobj.naturalHeigh > 0) {
img.FrWidth = imgobj.naturalWidth;
img.FrHeight = imgobj.naturalHeight;
}
//(未实现边距)
return img;
}
}
View Code
html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js瀑布流显示图片20180315.js" type="text/javascript"></script>
<script>
$(function () {
var images=[
{url:"https://test2015data.oss-cn-hangzhou.aliyuncs.com/image-hroot/year20173/image-201730/news/file_170328203053104559.png"}
,{url:"https://test2015data.oss-cn-hangzhou.aliyuncs.com/image-hroot/year20173/image-201730/news/file_170328203053104559.png"}
,{url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490965812249&di=7ec87be2d7b63733a7bba492e952202e&imgtype=0&src=http%3A%2F%2Fwww.shuhua365.com%2Fhualang%2Fuploadfile%2F2010312112959216.jpg"}
,{url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490965812249&di=7ec87be2d7b63733a7bba492e952202e&imgtype=0&src=http%3A%2F%2Fwww.shuhua365.com%2Fhualang%2Fuploadfile%2F2010312112959216.jpg"}
,{url:"http://photocdn.sohu.com/20170328/Img485277054.jpg"}
,{url:"http://photocdn.sohu.com/20170328/Img485277054.jpg"}
,{url:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=512897042,748871735&fm=80&w=179&h=119&img.JPEG"}]
WaterfallImg.executionShow({
maxWidth: 850,//每一行固定的总的宽度
frameHeight: 200,//相框初始高度
rightPadding: 0,//边距
imgs: images,
urlKey: "url"
}, function (result) {
console.log(result);
var $imgs=$("div[name='imgs']");
$.each(result.rows,function(i,n){
if(i%2==0)
$imgs.append('<div name="row_'+(i+1)+'" style="background-color:black">');
else
$imgs.append('<div name="row_'+(i+1)+'">');
$imgs.append('</div>');
$.each(n.imgs,function(j,img){
$('div[name="row_'+(i+1)+'"]').append('<img style="width:'+img.FrWidth+'px; height:'+n.RowHeight+'px;" src="'+img.obj.url+'">');
});
});
});
});
</script>
</head>
<body>
<div name="imgs" style="width:850px"></div>
</body>
</html>
View Code