关于瀑布流的封装

最新推荐文章于 2025-02-14 11:51:23 发布

蔣金澤

最新推荐文章于 2025-02-14 11:51:23 发布

阅读量251

点赞数

分类专栏： Javascript 文章标签：瀑布流

本文链接：https://blog.youkuaiyun.com/jiangjin_ze/article/details/79220880

版权

Javascript 专栏收录该内容

10 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #cont{margin: 0 auto;position: relative;}
            .box{float: left;padding: 5px;}
            .imgbox{border: solid 1px #aaa;padding: 4px;border-radius: 4px;box-shadow: 0px 0px 10px #aaa;}
            .imgbox img{width: 200px;display: block;}
        </style>
        <script type="text/javascript">
            onload = function(){
//              浏览器的宽度/每个box的宽度=可以放下几个box
                var clientW = document.documentElement.clientWidth || document.body.clientWidth;
                var ocont = document.getElementById("cont");
                var abox = ocont.getElementsByClassName("box");

                var maxNum = Math.floor(clientW/abox[0].offsetWidth);
                //设置大框的宽度为浏览器能放得下的最大数量的abox的总宽，为了做自适应居中效果
                ocont.style.width = maxNum * abox[0].offsetWidth + "px";

                var heightArr = [];
                //1.区分出第一行和其他行
                for(var i=0;i<abox.length;i++){
                    if(i<maxNum){
                        //2.取得第1行所有图片的高度,取出最小高度
                        heightArr.push(abox[i].offsetHeight);
//                      var min = Math.min.apply(null,heightArr);   //快速取得数组中最小值的方法
                    }else{
                        var minHeight = getMin(heightArr);
                        var minIndex = getIndex(heightArr,minHeight);
                        //3.设置其他行所有元素的位置
                        abox[i].style.position = "absolute";
                        abox[i].style.top = minHeight + "px";
                        abox[i].style.left = minIndex * abox[0].offsetWidth + "px";

                        //4.将原数组的最小高度加上当前放在他下面的元素的高度
                        heightArr[minIndex] += abox[i].offsetHeight;

                    }
                }

//              将所有小功能实现,就完成了大功能，面向对象的编程思想
//              瀑布流的实现思路就是一个典型的面向对象的分析

            }

            function getMin(arr){
                //特别注意：操作数组的时候，会改变原数组，因为数组属于引用类型（值传递和引用传递）
                var newArr = [];
                for(var i=0;i<arr.length;i++){
                    newArr.push(arr[i]);
                }
                //冒泡排序
                for(var i=0;i<newArr.length;i++){
                    for(var j=0;j<newArr.length;j++){
                        var ls = 0;
                        if(newArr[j]>newArr[j+1]){
                            ls = newArr[j];
                            newArr[j] = newArr[j+1];
                            newArr[j+1] = ls;
                        }
                    }
                }
                return newArr[0];
            }

            function getIndex(arr,data){
                for(var i=0;i<arr.length;i++){
                    if(arr[i] == data){
                        return i;
                    }
                }
            }

        </script>
    </head>
    <body>
        <div id="cont">
            <div class="box">
                <div class="imgbox">
                    <img src="img/3.jpg"/>
                </div>
            </div>
            <div class="box">
                <div class="imgbox">
                    <img src="img/2.jpg"/>
                </div>
            </div>
            <div class="box">
                <div class="imgbox">
                    <img src="img/1.jpg"/>
                </div>
            </div>  
    </body>
</html>