瀑布流—雲南●十八怪

時間 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。