【JS】【Demo】- js瀑布流显示图片20180315
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; } }
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>
