欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【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>