瀑布流布局的原理及实现

原理:

  1. 瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到需要布置的列数。
  2. 创建一个数组,长度为列数,数组元素为每一列已布置元素的总高度。(一开始为0)。
  3. 将未布置的元素,依次布置到高度最小的那一列,然后更新这一列的高度,就得到了瀑布流布局。

实现:

<!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>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <style>
        .waterfall{
            max-width:700px;
            margin:0 auto;
        }
        .waterfall img{
            width:100px;
            /* 绝对定位实现瀑布流布局 */
            position: absolute;
            margin:5px;
            /* 给图片重新排列加上动画效果 */
            transition: all 0.5s;
        }

    </style>
</head>
<body>
     <div class="waterfall">
        <img src="http://placekitten.com/100/100" alt="300*100">
        <img src="http://placekitten.com/100/70" alt="300*70">
        <img src="http://placekitten.com/100/150" alt="300*150">
        <img src="http://placekitten.com/100/250" alt="300*250">
        <img src="http://placekitten.com/100/80" alt="300*80">
        <img src="http://placekitten.com/100/90" alt="300*90">
        <img src="http://placekitten.com/100/120" alt="300*120">
        <img src="http://placekitten.com/100/180" alt="300*180">
        <img src="http://placekitten.com/100/100" alt="300*100">
        <img src="http://placekitten.com/100/70" alt="300*70">
        <img src="http://placekitten.com/100/150" alt="300*150">
        <img src="http://placekitten.com/100/250" alt="300*250">
        <img src="http://placekitten.com/100/80" alt="300*80">
        <img src="http://placekitten.com/100/90" alt="300*90">
        <img src="http://placekitten.com/100/120" alt="300*120">
        <img src="http://placekitten.com/100/180" alt="300*180">
     </div>
     <script>
        //  列的数量(容器的宽度除以图片的宽度得出的)
         var colCount;
        //  存放每一列的高度的数组
         var colHeightArray = [];
        //  每张图片的宽度
        // 这里只所以用 outerWidth 是因为图片可能会有边框 margin之类的,一并计算进去
        var imgWidth = $('.waterfall img').outerWidth(true);
        
         colCount = Math.floor($('.waterfall').width() / imgWidth);
         console.log(colCount);

        //  得到列数之后。对数组进行初始化,每一些的高度初始化为0
        for(var i = 0;i < colCount;i++){
            colHeightArray[i] = 0;
        }
        
        console.log($('.waterfall img').eq(2).height());
        
        // 然后开始摆放位置了,但是如果图片还没有加载,那么计算得到的列的宽高是不对的,所以要先确认图片加载
        $('.waterfall img').on('load',function(){
            // 我们假设数组里第一个高度值是最小的
            var minValue = colHeightArray[0];
            // 最小的高度的下标是0
            var minIndex = 0
            // 然后遍历高度数组,找出最小值,如果还有值比minVlue小,就把这个值作为最小值,它的下标作为最小值的下标
            for(var i = 0;i< colCount;i++){
                if(colHeightArray[i]<minValue){
                    minValue = colHeightArray[i];
                    minIndex = i;
                }
            }
            // 给先加载出来的图片设置定位,摆放图片
            $(this).css({
                left: minIndex * imgWidth,
                top: minValue
            })
            console.log(minValue);

            // 图片摆放好,这一列的高度就要进行更新了
            colHeightArray[minIndex] += $(this).outerHeight(true)

        })

        
        // 下边这一部分,是实现了当窗口尺寸发生变化的时候,图片实现重新排列
        $(window).on('resize',function(){
            // 每次窗口大小改变以后,列数,跟每列的高度数组,都会发生变化,所以要重新声明
            var colCount;  
            var colHeightArray = [];
            // 每次尺寸变化,都要重新计算列数
            colCount = Math.floor($('.waterfall').width() / imgWidth);
            
            // 初始化每列的高度
            for(var i=0;i<colCount;i++){
                colHeightArray[i] = 0;
            }
            
            // 因为上边图片已经加载过了,所以直接遍历图片
            $('.waterfall img').each(function(){
                var minValue = colHeightArray[0];
                var minIndex = 0;

                for(var i=0;i<colCount;i++){
                    if(colHeightArray[i]<minValue){
                        minValue = colHeightArray[i];
                        minIndex = i;
                    }
                }
                // 给遍历到的图片设置位置
                $(this).css({
                    left:minIndex*imgWidth,
                    top:minValue
                })
                // 设置位置后,更新高度
                colHeightArray[minIndex] += $(this).outerHeight(true); 
            })
        })
     </script>
</body>
</html>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,380评论 1 88
  • html结构 (Emmet)(div.box>div.pic>img[src="images/$.jpg"])*2...
    黎贝卡beka阅读 204评论 1 3
  • 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    飘飘流浪者阅读 927评论 0 1
  • 有些文一直留在自己的心底,不去触碰,也不摊开,害怕在阳光底下透明,或许是因为有些心情在当下自己也害怕去打扰,害怕有...
    LadyWitch阅读 57评论 0 0
  • 睡不着,索性起来写写东西。 很多时候,在睡前听听电台。慢慢的发现,里面的内容不仅鸡汤还物欲横飞。现在的社会,利益至...
    南门猪阅读 73评论 1 3