关注前端 | 前端博客
当前位置: JavaScript > JS-瀑布流

JS-瀑布流

2018-07-09 分类:JavaScript 作者:管理员 阅读(758)

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

<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) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - JS-瀑布流

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github uniapp插件

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线