JS 瀑布流

来源：互联网发布：论兰亭序知乎编辑：程序博客网时间：2024/05/10 22:27

重点讲解都在注释里

基本原理：将每张图片都定位到每一列中高度最小的那一列的后面，每当滚动页面的时候就加载一张图片，然后给图片定位。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>瀑布流</title>    <style>        *{            margin: 0;            padding: 0;        }        body{            background-color: #ccc;        }        .container{            width: 700px;            height: auto;            margin: 0 auto;            position: relative;        }        .box{            width:200px;            float: left;        }        .box .box_img img{            width: 95%;        }    </style></head><body>    <div class="container" id="container">        <div class="box">            <div class="box_img"><img src="./img/12.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/2.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/3.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/4.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/5.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/6.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/7.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/8.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/9.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/10.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/11.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/12.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/13.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/12.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/13.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/12.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/13.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/12.jpg"></div>        </div>        <div class="box">            <div class="box_img"><img src="./img/13.jpg"></div>        </div>    </div>    <script>window.onload = function () {    var imgArr = [{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"},]    waterFall();    function waterFall() {        var container = document.getElementById('container');        // var boxArr = container.getElementsByTagName('*');        var boxArr  = container.getElementsByClassName('box');        var colWidth  = container.getElementsByClassName('box')[0].offsetWidth;        var col = Math.floor(container.offsetWidth / colWidth);        var colHeight = [];     //每一列的高度        for(let i=0;i<boxArr.length;i++){            if(i<col){                colHeight.push(boxArr[i].offsetHeight);            }else{                var min = Math.min.apply(Math,colHeight);   //高度最小的                var minIndex = findMinIndex(colHeight,min); //高度最小的下标                boxArr[i].style.position = 'absolute';                boxArr[i].style.top = min + 'px';           //将图片的top坐标 定位到 列中 高度最小的那一列                boxArr[i].style.left = colWidth * minIndex   +'px';     //图片的left坐标 即为 列宽度 * 列的索引值                colHeight[minIndex] += boxArr[i].offsetHeight;      //最后 更新 存放 每一列高度的 colheight 数组            }        }    }window.onscroll = function () {    var bodyHeight = document.documentElement.offsetHeight;    var clientHeight = document.documentElement.clientHeight;    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    var scrollH = document.body.scrollHeight;    // console.log('页面高度' + bodyHeight)    // console.log('可视区域' + clientHeight)    // console.log('scroll' + scrollTop);    // console.log(scrollH);    if(scrollTop+clientHeight >= (scrollH-50)){         //滚动就 加载一张图片 然后 排列图片            console.log(scrollTop+clientHeight +'|||||'+ (scrollH-50));            var imgIndex =  Math.floor(Math.random() * imgArr.length);            console.log(imgIndex)            var box = document.createElement('div');            var box_img = document.createElement('div');            box.className = 'box';            box_img.className = 'box_img';            container.append(box);            box.append(box_img);            var img = document.createElement('img');            img.src = imgArr[imgIndex].src;            box_img.append(img)     }    waterFall()}    // 找到 高度数组中最小的数的index       function findMinIndex(arr,min){        var index ;        for(var i=0,length=arr.length;i<length;i++){            if(arr[i] == min){                return i;            }        }    }}</script></body></html>

阅读全文

0 0

JS 瀑布流

重点讲解 都在注释里

基本原理：将每张图片都定位到 每一列中 高度最小的 那一列的 后面，每当滚动页面的时候 就 加载一张图片，然后给图片定位。

重点讲解都在注释里

基本原理：将每张图片都定位到每一列中高度最小的那一列的后面，每当滚动页面的时候就加载一张图片，然后给图片定位。