JS-瀑布流

2018-07-09 分类：JavaScript 作者：管理员阅读（273）

概要：很多电商网站都有瀑布流的应用，早期在蘑菇街看到瀑布流的应用，每个图片宽度一样，不一样的是高度，滚动条滚动到一定位置就会加载图片

html布局
css样式
js方法
瀑布流思想

html

<body>  
    <ul id="list" class="clearfix">  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
    </ul>  
</body>

css

<style>  
*{margin: 0;padding: 0;list-style: none;}  
#list{width: 1110px;margin: 0 auto;}  
#list li{width: 212px;float: left;padding: 5px;}  
.div{border: 1px solid #333;padding: 5px;margin-bottom: 10px;}  
.img{width: 200px;display: block;}
.clearfix::after{content: "";display: block;clear: both;}  
</style>

//获取元素和一个标记变量
    //获取ul元素
    var oList=document.getElementById('list');
    //获取ul里的li元素  
    var aLi=oList.getElementsByTagName('li'); 
    //标记flag 用来控制滚动触发函数
    var flag=true;

//模拟初始化的数据
    //json数据  
    var json={  
        'data':[  
            {'src':'http://s11.mogucdn.com/mlcdn/55cf19/180606_71eba4fi6d28dcdfe8c5cbga82i9j_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180524_2i8b422ac3kj01ib90ja7i18kjh88_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/55cf19/180630_4eg021di6l8e0087c6ie0d0k1die1_640x960.jpg_240x320.v1cAC.webp'},  
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180408_12ak0afkihihb401d6gaiilhblkb2_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180510_2hehj25hbkibf6617122h948jc80c_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/p1/160719/36434224_ifqwcojqgi4wgolehezdambqgyyde_640x960.jpg_240x320.v1cAC.webp'},  
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180324_6hb292f3ik9cad2aka6j0e75lbl8e_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180507_7kfbhf7fk49eg9agle3j7ddklkh9k_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180709_6cfh4f8e8c8l9756f8306jf1la2l4_640x960.jpg_240x320.v1cAC.webp'},  
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180424_883kc5c5gfj1f611hh69fj01e91j4_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180423_72h6cjf0li1if4kg89706083d4jl9_800x1200.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180313_6icf64185a0f6fel9glc3bdki4699_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180509_6dffclbehblh5h9b0k8geik1ejjl6_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180327_57lj209b86e4d870f5k316j68bc8l_800x1200.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180414_4gg153j361cl5i288156lh7jbai19_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180705_4gc67cajk6hib80kj67d6akh2ifga_640x936.jpg_240x320.v1cAC.webp'},
        ],  
        'imgH':[  
            {'height':'232px'},{'height':'264px'},{'height':'300px'},  
            {'height':'289px'},{'height':'267px'},{'height':'278px'},  
            {'height':'300px'},{'height':'234px'},{'height':'271px'},  
            {'height':'251px'},{'height':'363px'},{'height':'333px'},
            {'height':'333px'},{'height':'320px'},{'height':'300px'},
            {'height':'333px'},{'height':'320px'},{'height':'300px'},  
            {'height':'333px'},{'height':'320px'}, 
        ]  
    }

//核心的3个方法
    //加载数据方法  
    function getLoad(){  
        for (var i=0;i<json.data.length;i++) {  
            var min=myMin();  
            var oDiv=document.createElement('div');  
            oDiv.className='div';  
            var oImg=document.createElement('img');  
            oImg.className='img';  
            oImg.src=json.data[i].src;  
            /*这里必须要设置高度，测试中发现js会把每一个节点、属性  
            创建好，然后再加载入图片，不设置一开始就不能比较li的高度*/  
            oImg.style.height=json.imgH[i].height;  
            oDiv.appendChild(oImg);  
            //高度最小的li插入div  
            aLi[min].appendChild(oDiv);  
        }  
        flag=true;
    }  
    //获取到当前li高度最小的索引  
    function myMin(){  
        var index=0;  
        var min=aLi[index].offsetHeight;  
        for (var i=1;i<aLi.length;i++) {  
            if(aLi[i].offsetHeight<min){  
                index=i;  
                min=aLi[index].offsetHeight;  
            }  
        }  
        return index;  
    }
    //监听滚动  
    window.onscroll=function (){
    	//要获取当前页面的滚动条纵坐标位置 
        var scroT=document.documentElement.scrollTop||document.body.scrollTop; 
        //获取页面可视区的高度
        var clieH=document.documentElement.clientHeight||document.body.clientHeight;
        //获取到当前li高度最小的索引 
        var minN=myMin();  
        //这里判断加载是刚出现空白就加载，也就是滚动到了高度最小那一列完了  
        if((aLi[minN].offsetTop+aLi[minN].offsetHeight)<(scroT+clieH)){  
            if(flag){  
                flag=false;  
                getLoad();  
            }  
        }  
    };

最后完整代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>简易瀑布流</title>  
<style type="text/css">  
*{margin: 0;padding: 0;list-style: none;}  
#list{width: 1110px;margin: 0 auto;}  
#list li{width: 212px;float: left;padding: 5px;}  
.div{border: 1px solid #333;padding: 5px;margin-bottom: 10px;}  
.img{width: 200px;display: block;}
.clearfix::after{content: "";display: block;clear: both;}  
</style>  
  
<script type="text/javascript">  
window.onload=function (){  

/*实现：5个li分成5列，通过判断当前哪一个li高度最小，然后把div插入到那个li里面*/  
	//获取ul元素
    var oList=document.getElementById('list');
    //获取ul里的li元素  
    var aLi=oList.getElementsByTagName('li'); 
    //标记flag 用来控制滚动触发函数
    var flag=true;
    //json数据  
    var json={  
        'data':[  
            {'src':'http://s11.mogucdn.com/mlcdn/55cf19/180606_71eba4fi6d28dcdfe8c5cbga82i9j_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180524_2i8b422ac3kj01ib90ja7i18kjh88_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/55cf19/180630_4eg021di6l8e0087c6ie0d0k1die1_640x960.jpg_240x320.v1cAC.webp'},  
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180408_12ak0afkihihb401d6gaiilhblkb2_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180510_2hehj25hbkibf6617122h948jc80c_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/p1/160719/36434224_ifqwcojqgi4wgolehezdambqgyyde_640x960.jpg_240x320.v1cAC.webp'},  
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180324_6hb292f3ik9cad2aka6j0e75lbl8e_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180507_7kfbhf7fk49eg9agle3j7ddklkh9k_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180709_6cfh4f8e8c8l9756f8306jf1la2l4_640x960.jpg_240x320.v1cAC.webp'},  
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180424_883kc5c5gfj1f611hh69fj01e91j4_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180423_72h6cjf0li1if4kg89706083d4jl9_800x1200.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180313_6icf64185a0f6fel9glc3bdki4699_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180509_6dffclbehblh5h9b0k8geik1ejjl6_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180327_57lj209b86e4d870f5k316j68bc8l_800x1200.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180414_4gg153j361cl5i288156lh7jbai19_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'},
            {'src':'http://s11.mogucdn.com/mlcdn/c45406/180705_4gc67cajk6hib80kj67d6akh2ifga_640x936.jpg_240x320.v1cAC.webp'},
        ],  
        'imgH':[  
            {'height':'232px'},{'height':'264px'},{'height':'300px'},  
            {'height':'289px'},{'height':'267px'},{'height':'278px'},  
            {'height':'300px'},{'height':'234px'},{'height':'271px'},  
            {'height':'251px'},{'height':'363px'},{'height':'333px'},
            {'height':'333px'},{'height':'320px'},{'height':'300px'},
            {'height':'333px'},{'height':'320px'},{'height':'300px'},  
            {'height':'333px'},{'height':'320px'}, 
        ]  
    }  
    getLoad();
    //加载数据方法 
    function getLoad(){  
        for (var i=0;i<json.data.length;i++) {  
            var min=myMin();  
            var oDiv=document.createElement('div');  
            oDiv.className='div';  
            var oImg=document.createElement('img');  
            oImg.className='img';  
            oImg.src=json.data[i].src;  
            /*这里必须要设置高度，测试中发现js会把每一个节点、属性  
            创建好，然后再加载入图片，不设置一开始就不能比较li的高度*/  
            oImg.style.height=json.imgH[i].height;  
            oDiv.appendChild(oImg);  
            //高度最小的li插入div  
            aLi[min].appendChild(oDiv);  
        }  
        flag=true;
    }  
    //获取到当前li高度最小的索引  
    function myMin(){  
        var index=0;  
        var min=aLi[index].offsetHeight;  
        for (var i=1;i<aLi.length;i++) {  
            if(aLi[i].offsetHeight<min){  
                index=i;  
                min=aLi[index].offsetHeight;  
            }  
        }  
        return index;  
    }
    //监听滚动  
    window.onscroll=function (){
    	//要获取当前页面的滚动条纵坐标位置 
        var scroT=document.documentElement.scrollTop||document.body.scrollTop; 
        //获取页面可视区的高度
        var clieH=document.documentElement.clientHeight||document.body.clientHeight;
        //获取到当前li高度最小的索引 
        var minN=myMin();  
        //这里判断加载是刚出现空白就加载，也就是滚动到了高度最小那一列完了  
        if((aLi[minN].offsetTop+aLi[minN].offsetHeight)<(scroT+clieH)){  
            if(flag){  
                flag=false;  
                getLoad();  
            }  
        }  
    };  
};  
</script>  
</head>  
<body>  
    <ul id="list" class="clearfix">  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
    </ul>  
</body>  
</html>

总结：
在Html页面中创建ul，再在ul创建5个li，5个li分成5列，
通过滚动条监听事件，判断当前哪一个li高度最小，
然后把div插入到那个li里面

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(0) 打赏