【js】【图片瀑布流】js瀑布流显示图片20180315
程序员文章站
2022-06-23 23:28:30
js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”。 js: //20180315 //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850,//每一行固定的总的宽度 ifBeyond: 1,//加载到最后一张图超出范围 ......
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>
上一篇: 分布式架构的演进过程精选
下一篇: 第 6 章 C控制语句:循环