SOURCE

window.onload = function() {
            var imgCon = document.getElementById('imgCon')
            var baseImgUrl = 'http://lenkuntang.cn/pdf/imgs/000';
            var winH = window.innerHeight;
            var curIdx = 1,
                maxImg = 7;
            generateFirstImg(curIdx++, function() {
                document.getElementById('container').remove()
                if (imgCon.offsetHeight < winH) {
                    generateFirstImg(curIdx++, function() {
                        renderRemainImg(curIdx++)
                    })
                } else {
                    renderRemainImg(curIdx++)
                }
            })


            function generateFirstImg(idx, cb) {
                var img = new Image();
                // img.style.width = '100%';
                img.src = baseImgUrl + idx + '.jpg'
                img.onload = function() {
                    imgCon.appendChild(img)
                    img.style.cssText += 'filter: blur(0px); -webkit-filter: blur(0px); -ms-filter: blur(0px)';
                    if (cb) cb()
                }
            }

            function renderRemainImg(idx) {
                var imgDiv = document.createElement('div');
                imgDiv.id = 'imgDiv';
                var j = idx;
                while (j < 8) {
                    (function(tempIdx) {
                        var img = new Image();
                        img.style.width = '100%';
                        img.dataset.imgSrc = tempIdx
                        img.src = baseImgUrl + idx + '.jpg'
                        imgDiv.appendChild(img)
                    })(j++)
                }
                imgCon.appendChild(imgDiv)
                if (imgCon.getBoundingClientRect) {
                    var imgRem = document.getElementById('imgDiv').getElementsByTagName('img');
                    window.onscroll = function() {
                        throttle(function() {
                            responsiveImgByBound(imgRem)
                        }, 1000, 300)()
                    }
                } else {
                    window.onscroll = function() {
                        responsiveImg(imgRem)
                    }
                }
            }

            /**
             * 函数节流方法
             * @param Function fn 延时调用函数
             * @param Number delay 延迟多长时间
             * @param Number atleast 至少多长时间触发一次
             * @return Function 延迟执行的方法
             */
            var throttle = function(fn, delay, atleast) {
                var timer = null;
                var previous = null;

                return function() {
                    var now = +new Date();

                    if (!previous) previous = now;

                    if (now - previous > atleast) {
                        fn();
                        // 重置上一次开始时间为本次结束时间
                        previous = now;
                    } else {
                        clearTimeout(timer);
                        timer = setTimeout(function() {
                            fn();
                        }, delay);
                    }
                }
            };

            function responsiveImgByBound(imgObj) {
                Array.prototype.forEach.call(imgObj, function(item, idx) {
                    var bottomDis = item.getBoundingClientRect().bottom - item.offsetHeight - winH;
                    if (bottomDis < 0) {
                        item.style.cssText += 'filter: blur(0px); -webkit-filter: blur(0px); -ms-filter: blur(0px)';
                        item.src = baseImgUrl + item.dataset.imgSrc + '.jpg';
                    }
                })
            }
        }

<div class="container" id="container">
        <div class="dot dot-1"></div>
        <div class="dot dot-2"></div>
        <div class="dot dot-3"></div>
    </div>
    <div style="height: 0px; width: 0px; overflow: hidden;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <defs>
                <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"/>
                </filter>
            </defs>
        </svg>
    </div>
    <div id="imgCon" class="img-con">

    </div>

body,html {
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        
        .container {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            filter: url('#goo');
            animation: rotate-move 2s ease-in-out infinite;
        }
        
        .dot {
            width: 70px;
            height: 70px;
            border-radius: 80%;
            background-color: #000;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        
        .dot-3 {
            background-color: #f74d75;
            animation: dot-3-move 2s ease infinite;
        }
        
        .dot-2 {
            background-color: #10beae;
            animation: dot-2-move 2s ease infinite;
        }
        
        .dot-1 {
            background-color: #ffe386;
            animation: dot-1-move 2s ease infinite;
        }
        
        @keyframes dot-3-move {
            20% {
                transform: scale(1)
            }
            45% {
                transform: translateY(-18px) scale(.45)
            }
            60% {
                transform: translateY(-40px) scale(.45)
            }
            80% {
                transform: translateY(-40px) scale(.45)
            }
            100% {
                transform: translateY(0px) scale(1)
            }
        }
        
        @keyframes dot-2-move {
            20% {
                transform: scale(1)
            }
            45% {
                transform: translate(-16px, 12px) scale(.45)
            }
            60% {
                transform: translate(-40px, 40px) scale(.45)
            }
            80% {
                transform: translate(-40px, 40px) scale(.45)
            }
            100% {
                transform: translateY(0px) scale(1)
            }
        }
        
        @keyframes dot-1-move {
            20% {
                transform: scale(1)
            }
            45% {
                transform: translate(16px, 12px) scale(.45)
            }
            60% {
                transform: translate(40px, 40px) scale(.45)
            }
            80% {
                transform: translate(40px, 40px) scale(.45)
            }
            100% {
                transform: translateY(0px) scale(1)
            }
        }
        
        @keyframes rotate-move {
            55% {
                transform: rotate(0deg)
            }
            80% {
                transform: rotate(360deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }
        
        .img-con img {
            width: 100%;
            -webkit-transition: filter .3s ease-out 0s;
            -moz-transition: filter .3s ease-out 0s;
            transition: filter .3s ease-out 0s;
            filter: blur(10px);
            -ms-filter: blur(10px);
            -webkit-filter: blur(10px);
        }