【js】【圖片瀑布流】js瀑布流顯示圖片20180315

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;
    }
}

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