图片瀑布流案例

最新推荐文章于 2024-09-27 17:56:05 发布

曼夭29

最新推荐文章于 2024-09-27 17:56:05 发布

阅读量608

点赞数

文章标签：前端瀑布流

本文链接：https://blog.csdn.net/qq_36663202/article/details/88722974

版权

图片：图片宽度一样，大概为192px;
在这里插入图片描述

1.把图片设成绝对定位
2.设置总体宽度，用总宽度/图片宽度，可以得知要排列的列数。

 var itemBox = document.getElementById('itemBox');
        var items = document.getElementsByClassName('item');
        // 1 获取到 #itemBox  宽度
        var itemBoxW = itemBox.offsetWidth;
        // 2 获取到.item 宽度
        var itemW = items[0].offsetWidth;
        // 3 求出列数
        var column = parseInt(itemBoxW / itemW);

3.求图片之间的间隔，没有间隔会很难看的

var distence = (itemBoxW - itemW * column) / (column - 1);

4.先将第一行图片的offsetHeight存储在数组里，取得offsetHeight最小，索引最先的图片。

 // 获取数组的最小值以及索引
        function getMin(arr) {
            var obj = {};
            obj.minV = arr[0];
            obj.minI = 0;
            for (var i = 1; i < arr.length; i++) {
                if (obj.minV > arr[i]) {
                    obj.minV = arr[i];
                    obj.minI = i;
                }
            }
            return obj;
        }

}

5.实现瀑布流方法

// 实现瀑布流布局的方法
        function waterFull() {
            for (var i = 0; i < items.length; i++) {
                if (i < column) {
                    items[i].style.left = (itemW + distence) * i + 'px';
                    //类似于offset，client之类的得到的是数字
                    arr[i] = items[i].offsetHeight;
                    // console.log(arr);
                } else {
                    // 列高
                    var minV = getMin(arr).minV;
                    // 索引
                    var minI = getMin(arr).minI;
                    items[i].style.left = (itemW + distence) * minI + 'px';
                    items[i].style.top = minV + distence + 'px';
                    
                    //从这个到最上面的height，替换刚开始最小的offseHeight保存在数组里，再用getMin(arr)
                    //循环得到原来第二个最小的，此时新存储的数字是最大的。
                    arr[minI] = minV + distence + items[i].offsetHeight;

                }

            }
        }

6.滚动窗口，持续不断的获取图片（ps:遇到的坑：图片要填满可视区，不然无法生成滚动条）

 window.onscroll = function () {
			 //此时pageYoffset相等于scrollTop
            if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
                var json = [
                    { "src": "./images/P_000.jpg" },
                    { "src": "./images/P_001.jpg" },
                    { "src": "./images/P_002.jpg" },
                    { "src": "./images/P_003.jpg" },
                    { "src": "./images/P_004.jpg" },
                    { "src": "./images/P_005.jpg" },
                    { "src": "./images/P_006.jpg" },
                    { "src": "./images/P_007.jpg" },
                    { "src": "./images/P_008.jpg" },
                    { "src": "./images/P_009.jpg" },
                    { "src": "./images/P_010.jpg" }
                ];
               
                for (var i = 0; i < json.length; i++) {
                    var div = document.createElement('div');
                    div.className = 'item';
                    var img = document.createElement('img');;
                    img.src = json[i].src;
                    div.appendChild(img);
                    itemBox.appendChild(div);
                }
                waterFull();


            }
        }

7.总代码

<!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>Document</title>
    <style>
            * {
                margin: 0;
                padding: 0;
                
            }
            #itemBox{
                width:1050px;
                margin: 0 auto;
                position: relative;
                /* display: flex;
              flex-direction: raw;
              flex-wrap: wrap; */
              

            }
             .item{
               
               padding: 4px;
               position: absolute;
               border: 1px solid #bebebe;
          
            } 
      
    </style>
</head>
<body>
        <div id="itemBox">
            <!-- <img>要超过屏幕才会出现滚动条 -->
            <div class="item">
                
                <img  src="./images/p_000.jpg"></img>
            </div>
            <div class="item">
                <img src="./images/p_001.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_002.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_003.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_004.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_005.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
            <div class="item">
                    <img src="./images/p_006.jpg"></img>
            </div>
               
        </div>
        
 <script>
  
    window.onload = function () {
    /* 
    思路分析
    1 获取到.itemBox 宽度
    2 获取到.item 宽度
    3 求出列数
    4 求出间距
    5 实现瀑布流布局的方法
    6 滚动页面时 加载数据
 */
    // 获取到相关元素
    
        var itemBox = document.getElementById('itemBox');
        var items = document.getElementsByClassName('item');
        // 1 获取到  #itemBox 宽度
        var itemBoxW = itemBox.offsetWidth;
        // 2 获取到.item 宽度
        var itemW = items[0].offsetWidth;
        // 3 求出列数
        var column = parseInt(itemBoxW / itemW);
        console.log(column)
        // 4 求出间距
        var distence = (itemBoxW - itemW * column) / (column - 1);
        
        // 5 实现瀑布流布局的方法
        // 定义一个存储每列高度的容器
        var arr = [];
        waterFull();
        // 6 滚动页面时 加载数据
        window.onscroll = function () {
            if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
                var json = [
                    { "src": "./images/P_000.jpg" },
                    { "src": "./images/P_001.jpg" },
                    { "src": "./images/P_002.jpg" },
                    { "src": "./images/P_003.jpg" },
                    { "src": "./images/P_004.jpg" },
                    { "src": "./images/P_005.jpg" },
                    { "src": "./images/P_006.jpg" },
                    { "src": "./images/P_007.jpg" },
                    { "src": "./images/P_008.jpg" },
                    { "src": "./images/P_009.jpg" },
                    { "src": "./images/P_010.jpg" }
                ];
                console.log(json)
                for (var i = 0; i < json.length; i++) {
                    var div = document.createElement('div');
                    div.className = 'item';
                    var img = document.createElement('img');;
                    img.src = json[i].src;
                    div.appendChild(img);
                    itemBox.appendChild(div);
                }
                waterFull();


            }
        }
        // 实现瀑布流布局的方法
        function waterFull() {
            for (var i = 0; i < items.length; i++) {
                if (i < column) {
                    items[i].style.left = (itemW + distence) * i + 'px';
                    arr[i] = items[i].offsetHeight;
                    // console.log(arr);
                } else {
                    // 高
                    var minV = getMin(arr).minV;
                    // 索引
                    var minI = getMin(arr).minI;
                    items[i].style.left = (itemW + distence) * minI + 'px';
                    items[i].style.top = minV + distence + 'px';
                    //下一组的height
                    arr[minI] = minV + distence + items[i].offsetHeight;

                }

            }
        }

        // 获取数组的最小值以及索引
        function getMin(arr) {
            var obj = {};
            obj.minV = arr[0];
            obj.minI = 0;
            for (var i = 1; i < arr.length; i++) {
                if (obj.minV > arr[i]) {
                    obj.minV = arr[i];
                    obj.minI = i;
                }
            }
            return obj;
        }

}
</script>
  
</body>
</html>