93JS原生：瀑布流图片

所谓瀑布流图片，就是随着鼠标往下拉，图片无穷无尽，但又不是死循环。因为这次拉到底后，后面的才显示出来。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
            font-size: 50px;
            color: white;
        }
        div{
            width: 1050px;
            margin:0 auto;
        }
        div ul{
            width: 200px;
            float: left;
            margin: 0 5px;
        }
        div ul li{
            width: 100%;
            background: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5c2ddf7c938c5a6ae54f0b1ab390b9fe") no-repeat center #e1e1e1;
            margin-bottom: 10px;
        }
        div ul li img{
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <ul><!--<li><img realImg="1.jpg" alt=""/></li>--></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>
<script>
    var oDiv=document.getElementsByTagName('div')[0];
    var aUl=oDiv.getElementsByTagName('ul');
    var aLi=oDiv.getElementsByTagName('li');
    var aImg=oDiv.getElementsByTagName('img');
    //此处是自己造的假数据
    var data=[
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517855671_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517857750_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517860171_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518058703_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518060703_mthumb.jpg"}
    ];
    function rnd(n,m){
        return Math.round(Math.random()*(m-n)+n);
    }
    function makeArray(arg){
        var ary=[];
        if('getComputedStyle' in window){
            ary=Array.prototype.slice.call(arg);
        }else{
            for(var i=0; i<arg.length; i++){
                ary.push(arg[i])
            }
        }
        return ary;
    }
    function win(attr){
        return document.documentElement[attr]||document.body[attr];
    }
    //1.动态创建1个li,li的宽度不管，高度随机，内容是img；
    function createLi(){
        var oLi=document.createElement('li');
        oLi.style.height=rnd(100,300)+'px';
        oLi.innerHTML='<img realImg="'+data[rnd(0,9)].src+'" alt=""/>';
        return oLi;
    }
    //2.创建50个li，每次都插入最短的ul
    function li50(){
        for(var i=0; i<50; i++){
            var oLi=createLi();
            var ary=makeArray(aUl);
            ary.sort(function(a,b){
                return a.offsetHeight- b.offsetHeight;
            });
            ary[0].appendChild(oLi);
        }
    }
    li50();
    showImg();
    window.onscroll=function(){
        var scrollBottom=win('scrollTop')+win('clientHeight');
        showImg();//延迟加载图片，只要图片进入可视区，才显示图片
        if(scrollBottom>=win("scrollHeight")){
            li50();//不管是否进入可视区，只要满足条件，都会动态创建50个；
        }
    };
    function showImg(){
        var scrollBottom=win('scrollTop')+win('clientHeight');
        for(var i=0; i<aLi.length; i++){
            var imgPos=aLi[i].offsetTop+aLi[i].offsetHeight;
            if(imgPos<scrollBottom){
                aImg[i].src=aImg[i].getAttribute('realImg');
                aImg[i].parentNode.style.height='auto';
            }
        }
    }
</script>
</body>
</html>
```
93JS原生：瀑布流图片

猜你喜欢
