瀑布流—云南●十八怪

时间 2019-11-10
原文原文链接
瀑布流：瀑布流式布局（网站布局方式的一种）视觉上表现为良莠不齐的多栏布局。应用领域为：电商导购、兴趣图分享等页面；其特色为琳琅满目、惟美、操做简单等特色；布局优势为有效的下降页面复杂度、节省空间；交互方式更符合直觉；更高的参与度，以上两点带来的交互便捷性，能够使用户侧重于内容而不是操做上。关于瀑布流的具体操做以云南●十八怪为例详细代码以下：html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
        /* 消除自带样式  */
        *{
            margin: 0;
            padding: 0;
            border: none;
        }
        img{
            border: none;
        }
        a{
            text-decoration: none;
            color: #444444;
        }
        a:hover{
            color: lightslategray;
        }
        body{
            background: rgb(223, 221, 221);
        }

        /* wrap区域 */
        #wrap{
            width: auto;
            height: auto;
            margin: 0 auto;
        }
        #wrap >div{
            width: 280px;
            padding: 10px;
            margin: 10px;
            background: #ffffff;
            border-radius:5px; 
            box-sizing: border-box;
            float: left;
        }
        #wrap >div>img{
            width: 100%;
            height: 100%;
            display: block;
        }
        #wrap >div> a{
            line-height: 45px;
            text-align: center;
            display: block;
        }
    </style>
    <script>
        function waterfall(boxes,wrap){
            // 一个div盒子的宽度
            var boxWidth=boxes[0].offsetWidth +20;
           //windw的宽度
           var windowWidth=document.documentElement.clientWidth;
            //一列几行
            var closNum=Math.floor(windowWidth/boxWidth);
            // 改变wrap宽度
            wrap.style.width=boxWidth*closNum +'px';


            //经过新建一个数组来存储每列图片的高度，并在每列高度中找到图片高度最小值（从小到大）来依次放置图片，造成良莠不齐的图片布局样式
            // 定义数组存储每列高度
            var everyHeight=new Array();
            //循环全部盒子
            for(var i=0;i<boxes.length;i++){
                if(i<closNum){ //当i<列数时执行以下代码 
                    //盒子高度   数组长度=列数
                    everyHeight[i]=boxes[i].offsetHeight +20;
                }else{//i>=列数时执行以下代码 
                    //最小高度   apply（）内键函数
                    var minHeight=Math.min.apply(null,everyHeight);
                    // 最小高度下标
                    var minIndex=getIndex(minHeight,everyHeight);
                   //左边距
                   var leftValue=boxes[minIndex].offsetLeft-10;
                   //设置绝对定位样式 
                   boxes[i].style.position='absolute';
                   boxes[i].style.top=minHeight +'px';
                   boxes[i].style.left=leftValue +'px';

                // 两个图片的高度相加依次类推   
                   everyHeight[minIndex]+=boxes[i].offsetHeight+20;
                };
            };

        };
        //获取最小列下标
        function getIndex(minHeight,everyHeight){
            for(index in everyHeight){
                if(everyHeight[index] == minHeight){
                    return index;
                }
            }
        };
        //检测是否具有了滚动条加载数据块的条件
        function checkScrollSlide(){
             //获取对象
            var wrap=document.getElementById('wrap');
            var boxes=wrap.getElementsByTagName('div');
             //最后一个盒子距离顶部的高度+最后一个盒子高度的一半
             var lastBoxH=boxes[boxes.length-1].offsetTop+Math.floor(boxes[boxes.length-1].offsetTop/2);
              //页面滚走的距离分为混杂模式（使用body元素检测）和标准模式（htm元素检测）
             var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
             //当前浏览器可视窗口距离
             var windowHeight=document.body.clientHeight ||  document.documentElement.clientHeight;
             return (lastBoxH<screenTop+windowHeight)?true:false;

        }
        window.onload=function(){ 
            //获取对象
            var wrap=document.getElementById('wrap');
            var boxes=wrap.getElementsByTagName('div');
        //    调用函数
             waterfall(boxes,wrap); 

//  -----------------------------滚动条加载数据----------------------------------------------------------------
            //模拟json数据
            var dataInt={'data':[
                {"src":'1.png'},
                {"src":'2.png'},
                {"src":'3.png'},
                {"src":'4.png'},
                {"src":'5.png'}
            ],'text':[
                {'txt':'第一怪●竹筒当烟袋'},
                {'txt':'第二怪●草帽当锅盖'},
                {'txt':'第三怪●这边下雨那边晒'},
                {'txt':'第四怪●四季服装同穿戴'},
                {'txt':'第五怪●火车没有汽车快'}
                ]};
             //拖动滚动条所触发的事件
             window.onscroll=function(){
                if(checkScrollSlide){ 
                    var wrap=document.getElementById('wrap');
                    //将数据块渲染到页面尾部
                    //遍历json数据
                    for(var i=0;i<dataInt.data.length;i++){
                        //渲染：将数据放到什么位置
                        //建立div
                        var createDiv=document.createElement('div');
                        //建立img标签
                        var creatImg=document.createElement('img');
                        //图片路径
                        creatImg.src="images/"+dataInt.data[i].src;
                        //appendChild将一个元素插入到父元素底部
                        wrap.appendChild(createDiv);
                        //将图片插入父元素上
                        createDiv.appendChild(creatImg); 
                        //建立a标签
                        var creatA=document.createElement('a');
                        //a标签的内容
                        //给a添加herf属性
                        creatA.setAttribute('href','https://www.imooc.com/');
                        creatA.innerHTML=dataInt.text[i].txt;
                        createDiv.appendChild(creatA);
                    };
                    // 再次调用waterfall函数来计算图片
                    waterfall(boxes,wrap); 
                }
             }
        }
    </script>
</head>
<body>
    <div id="wrap">
        <div><img src="images/1.png" ><a href="https://www.imooc.com/">第一怪●竹筒当烟袋</a></div>
        <div><img src="images/2.png" ><a href="https://www.imooc.com/">第二怪●草帽当锅盖</a></div>
        <div><img src="images/3.png" ><a href="https://www.imooc.com/">第三怪●这边下雨那边晒</a></div>
        <div><img src="images/4.png" ><a href="https://www.imooc.com/">第四怪●四季服装同穿戴</a></div>
        <div><img src="images/5.png" ><a href="https://www.imooc.com/">第五怪●火车没有汽车快</a></div>
        <div><img src="images/6.png" ><a href="https://www.imooc.com/">第六怪●火车不通国内通国外</a></div>
        <div><img src="images/7.png" ><a href="https://www.imooc.com/">第七怪●老奶登山比猴快</a></div>
        <div><img src="images/8.png" ><a href="https://www.imooc.com/">第八怪●鞋子后面多一块</a></div>
        <div><img src="images/9.png" ><a href="https://www.imooc.com/">第九怪●脚趾四季露在外</a></div>
        <div><img src="images/10.png" ><a href="https://www.imooc.com/">第十怪●鸡蛋拴着卖</a></div>
        <div><img src="images/11.png" ><a href="https://www.imooc.com/">第十一怪●粑粑叫饵块</a></div>
        <div><img src="images/12.png" ><a href="https://www.imooc.com/">第十二怪●花生蚕豆数着卖</a></div>
        <div><img src="images/13.png" ><a href="https://www.imooc.com/">第十三怪●三个蚊子一盘菜</a></div>
        <div><img src="images/14.png" ><a href="https://www.imooc.com/">第十四怪●四个竹鼠一麻袋</a></div>
        <div><img src="images/15.png" ><a href="https://www.imooc.com/">第十五怪●树上松毛扭着卖</a></div>
        <div><img src="images/16.png" ><a href="https://www.imooc.com/">第十六怪●姑娘叫老太</a></div>
        <div><img src="images/17.png" ><a href="https://www.imooc.com/">第十七怪●小和尚能够谈恋爱</a></div>
        <div><img src="images/18.png" ><a href="https://www.imooc.com/">第十八怪●背着娃再恋爱</a></div>
    </div>
</body>
</html>