瀑布流布局图片URL以blob格式展示

 

1、完整代码

<!doctype html>
<html>
<head>
    <style>
        body {
            background: #e5e5e5;
        }
        
        #root {
            margin: 0 auto;
            width: 1200px;
            column-count: 5;
            column-width: 240px;
            column-gap: 20px;
        }
        
        .item {
            margin-bottom: 10px;
            break-inside: avoid;
            background: #fff;
        }

            .item:hover {
                box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
            }
        
        .itemImg {
            width: 100%;
            vertical-align: middle;
        }
        
        .userInfo {
            padding: 5px 10px;
        }

        .avatar {
            vertical-align: middle;
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .username {
            margin-left: 5px;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

    <div id="root"></div>

    <script>
        var pageIndex = 1;
        /*
         * 数据渲染
         * */
        function renderPage(data) {
            var container = document.getElementById('root');
            for (var i = 0; i < data.length; i++) {
                var item = document.createElement('div');
                item.className = 'item';
                var img = document.createElement('img');
                img.className = 'itemImg';
                img.alt = '封面';
                imgSrc2Blob(img, data[i].thumbnail);
                img.onload = function () {
                    window.URL.revokeObjectURL(img.src);
                }
                item.appendChild(img);
                var uInfo = document.createElement('div');
                uInfo.className = 'userInfo';
                var uImg = document.createElement('img');
                uImg.className = 'avatar';
                uImg.alt = '头像';
                imgSrc2Blob(uImg, data[i].userInfo.avatar);
                uImg.onload = function () {
                    window.URL.revokeObjectURL(this.src);
                };
                var uName = document.createElement('span');
                uName.className = 'username';
                uName.innerText = data[i].userInfo.name;;
                uInfo.appendChild(uImg);
                uInfo.appendChild(uName);
                item.appendChild(uInfo);
                container.appendChild(item);
            }
        };
        // 图片网络地址转 blob 对象地址
        function imgSrc2Blob(img, src) {
            url2Base64(src, function (base64Data) {
                
                var blob = base64ToBlob(base64Data);
                img.src = window.URL.createObjectURL(new Blob([blob]));
            });
        };
        // 文件类型
        function getFileType(file) {
            var index = file.lastIndexOf('.');
            return file.substring(index + 1, file.length);
        };
        // 图片 url 转 base64
        function url2Base64(url, callback) {
            var type = getFileType(url);
            var mime = 'image/' + type + '';
            var canvas = document.createElement('canvas');
            var img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = function () {
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                canvas.getContext('2d').drawImage(img, 0, 0);
                var dataUrl = canvas.toDataURL(mime);
                callback.call(this, dataUrl);
                canvas = null;
            };
            img.src = url;
        };
        // base64 转 blob
        function base64ToBlob(base64Data) {
            var arr = base64Data.split(','), mime = arr[0].match(/:(.*?);/)[1], data = atob(arr[1]), n = data.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = data.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        };

        window.onscroll = function () {
            
            if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
                pageIndex += 1;
                loadData(pageIndex);
            }
        }

        function loadData(pageIndex) {
            $.ajax({
                url: '/home/index',
                type: 'get',
                contentType: 'application/json',
                data: {
                    pageIndex: pageIndex,
                    pageSize: 50
                },
                dataType: 'json',
                success: function (res) {
                    debugger
                    renderPage(res);
                },
                error: function (e) {

                }
            })
        };
        $(function () {
            loadData(pageIndex);
        })

    </script>
</body>
</html>

 

 

2、页面效果

 

 

 

posted @ 2022-01-03 02:33  原来是李  阅读(274)  评论(0)    收藏  举报