js實現瀑布流效果

時間  2019-12-25
標籤 實現 瀑布 效果 欄目 JavaScript 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .warp{position: relative;}
        .box{padding: 15px 0 0 15px;float: left;}
        .pho{padding: 10px;border: 1px solid #ccc;border-radius: 6px;box-shadow: 0 0 6px #ccc;background:rgba(255, 252, 252, 0.6);}
        img{border-radius: 6px;width: 220px;height: auto;border: none;}
        #backtop{height: 20px;border: 1px solid #ccc;position: fixed;bottom: 20px;right: 10px;color: #000;font-size: 14px;background: #cccccc;
        text-decoration: none;line-height: 20px;padding: 0 8px 0 8px;border-radius: 8px;display: none;}
    </style>
    /*
    *注意：一、全部圖片的寬度都相同，使用時用注意圖片的路徑，
     *注意：二、第一次沒有動態生成div，所以warp裏的div不能刪除。
     *注意：三、chrome瀏覽器下
     *原理：一、先放好第一行的圖片，其餘的圖片根據設置的方法定位在相應的位置
    *原理：二、第二行圖片的位置，第二行第一張圖片應該放在第一行圖片高度最小的一個下面，依次類推。
    *原理：三、圖片加載，瀏覽器只加載可視窗口的圖片，( 最後一張圖片的scrollTop+offsetHeight/2
    *   瀏覽器的可視窗口clientHeight,滾動條部分劇頂部的高度scrollTop）。通常狀況（最後一張圖片的scrollTop+offsetHeight/2
     *  =clientHeight+scrollTop），根據二者的關係判斷是否加載圖片。
    *原理：四、用的for循環來實現用15張圖片重複加載。
    */
</head>
<body>
    <div class="warp">
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i1.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i2.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i3.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i4.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i5.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i6.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i7.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i8.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i9.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i10.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i11.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i12.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i13.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i14.jpg" alt=""/>
                </a>
            </div>
        </div>
        <div class="box">
            <div class="pho">
                <a href="#">
                    <img src="images/i15.jpg" alt=""/>
                </a>
            </div>
        </div>
    </div>
    <a href="javascript:void(0)"id="backtop">返回頂部</a>
</body>
<script type="text/javascript">
    window.onload=function(){
        ppl();
        var oTop=document.getElementById("backtop");
        var img_Data={
            'data':[
                {'src':'images/i1.jpg'}, {'src':'images/i2.jpg'}, {'src':'images/i3.jpg'}, {'src':'images/i4.jpg'}, {'src':'images/i5.jpg'},
                {'src':'images/i6.jpg'}, {'src':'images/i7.jpg'}, {'src':'images/i8.jpg'}, {'src':'images/i9.jpg'}, {'src':'images/i10.jpg'},
                {'src':'images/i11.jpg'}, {'src':'images/i12.jpg'}, {'src':'images/i13.jpg'}, {'src':'images/i14.jpg'}, {'src':'images/i15.jpg'}
            ]
        };
        window.onscroll=function(){
            if(checkScroll()){
                var _oWarp=document.getElementsByClassName('warp').item(0);
                for(var i=0;i<img_Data.data.length;i++){
                    var _oBox = document.createElement('div');
                    _oBox.className='box';
                    _oWarp.appendChild(_oBox);
                    var _opho = document.createElement('div');
                    _opho.className='pho';
                    _oBox.appendChild(_opho);
                    var _oA = document.createElement('a');
                    _oA.href='javascript:void(0)';
                    _opho.appendChild(_oA);
                    var _img=document.createElement('img');
                    _img.src=img_Data.data[i].src;
                    _oA.appendChild(_img);
                }
                ppl();
            }
            oTop.style.display = "inline-block";// 控制按鈕顯示or隱藏
        };
        oTop.addEventListener('click', function () {//    返回頂部
            var timer = null;
            timer = setInterval(function () {
                var scrollt = document.body.scrollTop;
                var speed = scrollt / 3;
                document.body.scrollTop = scrollt - speed;
                if (scrollt == 0) {
                    clearTimeout(timer);
                    oTop.style.display = "none";
                }
            }, 30)
        }, false);
    };
    //獲取圖片
    function getPic(){
        var arrpic=[];
        var allpic=document.getElementsByClassName('box');
        for(var i=0;i<allpic.length;i++){
            arrpic.push(allpic[i]);
        }
        return arrpic;
    }
    function ppl(){
        var apho=getPic();
        var opho_Width=apho[0].offsetWidth;//每張圖片自身寬度
        var num=Math.floor(document.documentElement.clientWidth/opho_Width);//每行圖片的個數
        //設置父元素的寬
        var oparent=document.getElementsByClassName('warp').item(0);//獲取父元素
        oparent.style.width = num*opho_Width+'px';
        oparent.style.margin = '0 auto';
        var opho_Height=[];//存放每一個圖片元素的高度
        for(var i=0;i<apho.length;i++){
           if(i<num){//第一行
                opho_Height.push(apho[i].offsetHeight);
           }else{
               //第一行高度最小的
               var min_H=Math.min.apply(null,opho_Height);
              // alert(min_H);
               //高度最小的元素的索引號
               var min_Index= getMinindex(opho_Height,min_H);//在opho_Height找到高度爲min_H的索引號
               apho[i].style.position = 'absolute';
               apho[i].style.top = min_H+'px';
               apho[i].style.left=apho[min_Index].offsetLeft+'px';
               opho_Height[min_Index] += apho[i].offsetHeight;
           }
        }
    }
    function getMinindex(e,e1){
        for(var i=0;i< e.length;i++){
            if(e[i]==e1){
                return i;
            }
        }
    }
//    加載
    function checkScroll(){
        var oBox=document.getElementsByClassName("box");
        //存放圖片的最後一個div元素，距離頁面最頂部的高度 + 存放圖片的最後一個div元素自身高度的一半
        var last_boxHeight=oBox[oBox.length-1].offsetTop-Math.floor(oBox[oBox.length-1].offsetHeight/2);//最後元素的、距離頂部的高度+自身高度的一半
        var cleientHeight=document.documentElement.clientHeight||document.body.clientHeight;//可視區域的高度
        var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//捲上去的高度
        return (last_boxHeight<(cleientHeight+scrollTop))?true:false;
    }
</script>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程