js实现网页瀑布流布局

时间：2023-03-08 16:00:32

效果图：

js实现网页瀑布流布局

html代码实现网页布局：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>waterfall</title>

     <link rel="stylesheet" href="css/main.css">

     <script src="js/main.js"></script>

 </head>

 <body>

 <div id="main">

     <div class="box">

         <div class="pic">

             <img src="data:images/img_1.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_2.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_3.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_4.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_5.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_6.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_7.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_8.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_9.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_10.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_11.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_12.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_13.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_14.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_15.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_16.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_17.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_18.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_19.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_20.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_21.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_22.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_23.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_24.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_25.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_26.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_27.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_28.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_29.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_30.jpg" alt="...">

         </div>

     </div>

 </div> 

 </body>

 </html>

css控制网页样式:

* {

    margin:;

    padding:;

}

.main {

}

.box {

    float:left;

    padding: 7px;

}

.pic img{

    width:300px;

    height: auto;

    border-radius: 5px;

}

其效果体验为：

1、当你滚动滚动条时（既鼠标下拉），网页图片会随着你的下拉不断的呈现出来源源不断（不是很多图片，是通过js让其以json的格式传递数据，然后然这些图片数据不断重复出现）。

2、图片等宽不等高，参差不齐，很有艺术感（文艺旅游相册网站），你懂的。

js实现瀑布流效果：

window.onload = function(){

    waterfall("main","box");

    var dataInt = {'data':[{"src":"img_1.jpg"},{"src":"img_2.jpg"},{"src":"img_3.jpg"},{"src":"img_4.jpg"},{"src":"img_5.jpg"},{"src":"img_6.jpg"},{"src":"img_7.jpg"},{"src":"img_8.jpg"},{"src":"img_9.jpg"},{"src":"img_10.jpg"},{"src":"img_11.jpg"},{"src":"img_12.jpg"},{"src":"img_13.jpg"},{"src":"img_14.jpg"},{"src":"img_15.jpg"},{"src":"img_16.jpg"},{"src":"img_17.jpg"},{"src":"img_18.jpg"},{"src":"img_19.jpg"},{"src":"img_20.jpg"},{"src":"img_21.jpg"},{"src":"img_1.jpg"},{"src":"img_22.jpg"},{"src":"img_24.jpg"},{"src":"img_25.jpg"},{"src":"img_26.jpg"},{"src":"img_27.jpg"},{"src":"img_28.jpg"},{"src":"img_29.jpg"},{"src":"img_30.jpg"}]}

    window.onscroll=function(){

        if(checkScrollSlide){

            var oParent = document.getElementById('main');

            for(var i=0;i<dataInt.data.length;i++){

                var oBox = document.createElement('div');

                oBox.className='box';

                oParent.appendChild(oBox);

                var oPic = document.createElement('div');

                oPic.className='pic';

                oBox.appendChild(oPic);

                var oImg = document.createElement('img');

                oImg.src="data:images/"+dataInt.data[i].src;

                oPic.appendChild(oImg);

            }

            waterfall("main","box");

        }

    }

}

function waterfall(parent, box){

    var oParent = document.getElementById(parent);

    var oBoxs = getByClass(oParent,box);

    var oBoxw = oBoxs[0].offsetWidth;

    var cols = Math.floor(document.documentElement.clientWidth/oBoxw);

    oParent.style.cssText = "width:"+oBoxw*cols+"px;margin: 0 auto";

    var hArr = [];

    for(var i = 0; i<oBoxs.length;i++){

        if(i<cols){

            hArr.push(oBoxs[i].offsetHeight);

        }else{

            var minH = Math.min.apply(null, hArr);

            var index = getMinhIndex(hArr,minH);

            oBoxs[i].style.position="absolute";

            oBoxs[i].style.top=minH+"px";

            oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';

            hArr[index] += oBoxs[i].offsetHeight;

        }

    }

}

function getByClass(parent, clsName){

    var boxArr = new Array(),

        oElements = parent.getElementsByTagName('*');

    for(var i=0; i<oElements.length;i++){

        if(oElements[i].className==clsName)

            boxArr.push(oElements[i]);

    }

    return boxArr;

}

function getMinhIndex(arr, val){

    for(var i in arr){

        if(arr[i]==val){

            return i;

        }

    }

}

function checkScrollSlide (){

    var oParent = document.getElementById(parent);

    var oBoxs = getByClass(oParent,box);

    var lastBoxH = oBoxs[oBox.length-1].offsetTop;

    var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

    var height = document.body.clientHeight||document.documentElement.clientHeight;

    return (lastBoxH<scrollTop+height)?true:false;

}

相关文章