无限瀑布流 JS原生代码

来源：互联网发布：csgo举报机器人软件编辑：程序博客网时间：2024/06/06 02:29
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="css/initialize.css">    <style>        .out {            position: relative;            margin: 0 auto;        }        .in {            float: left;        }        .img {            margin: 10px;            padding: 10px;            border-radius: 10px;            border: 1px solid #666;            box-shadow: 0 0 5px #ff7ba5;        }    </style></head><body><div class="out">    <div class="in">        <div class="img"><img src="img/i1.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i2.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i3.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i4.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i5.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i6.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i7.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i8.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i9.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i10.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i11.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i12.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i13.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i14.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i15.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i3.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i4.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i5.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i6.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i7.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i8.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i9.jpg" alt=""></div>    </div>    <div class="in">        <div class="img"><img src="img/i10.jpg" alt=""></div>    </div></div><script>    window.onload = function () {        var data = '{"data":[{"src":"i1.jpg"},{"src":"i2.jpg"},{"src":"i3.jpg"},{"src":"i4.jpg"},{"src":"i5.jpg"},{"src":"i6.jpg"},{"src":"i7.jpg"},{"src":"i8.jpg"},{"src":"i9.jpg"},{"src":"i10.jpg"},{"src":"i11.jpg"},{"src":"i12.jpg"},{"src":"i13.jpg"},{"src":"i14.jpg"},{"src":"i15.jpg"}]}';        var out = document.getElementsByClassName('out')[0];        var inName = document.getElementsByClassName('in');        function pbl() {            var arr = [];            var winWid = document.documentElement.clientWidth;            var imgWid = inName[0].offsetWidth;            num = Math.floor(winWid / imgWid);            if(num<1) return;            out.style.width = num * imgWid + 'px';            for (var i = 0; i < inName.length; i++) {                if (i < num) {                    arr.push(inName[i].offsetHeight);                    inName[i].style.position = 'static';                } else {                    inName[i].style.position = 'absolute';                    var minArr = Math.min.apply(null, arr);                    var index = arr.indexOf(minArr);                    inName[i].style.top = minArr + 'px';                    arr[index] += inName[i].offsetHeight;                    inName[i].style.left = inName[index].offsetLeft + 'px';                }            }        }        pbl();        window.onscroll = function () {            var widH = document.documentElement.clientHeight; //获取时候的高度            var tTop = inName[inName.length - 1].offsetTop; //获取最后一张图片到顶部的距离            var hdH = document.documentElement.scrollTop||document.body.scrollTop; //获取滑动的高度            if(tTop<widH+hdH){                var jieGuo = JSON.parse(data);                for(var i=0;i<jieGuo.data.length;i++){                    var div1 = document.createElement('div');                    div1.className = 'in';                    var div2 = document.createElement('div');                    div2.className = 'img';                    var img = new Image;                    img.src = 'img/'+jieGuo.data[i].src;                    div2.appendChild(img);                    div1.appendChild(div2);                    out.appendChild(div1);                }                pbl();            }        };        window.onresize = function () {            pbl();        }    };</script></body></html>
0 0