js实现瀑布流效果

作者: jane819 | 来源:发表于2018-11-17 17:17 被阅读0次

JavaScript实现瀑布流效果
js实现瀑布流效果
瀑布流布局的学习
瀑布流布局
Js实现瀑布流
js/jQuery实现瀑布流
进阶18 瀑布流
使用js来实现瀑布流效果
原生js实现瀑布流效果
原生Js实现瀑布流效果

瀑布流的特点：宽度确定，高度不确定；通过定位处理的。
每一行添加在高度最低的下面
绝对定位
- left:图片的宽度*索引
- top:最小的高度
创建一个数组
浏览器可视区域的宽度/图片的宽度=列数
html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js实现瀑布流</title>
        <style>
            .box{
                position: relative;
            }
            .box .item{
                position: absolute;
                width: 200px;
                margin: 5px;
                transition: all 1s; 
                border:1px solid #ccc;
                
            }
            .box .item img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"><img src="image/1.jpeg" alt="" /></div>
            <div class="item"><img src="image/1.jpg" alt="" /></div>
            <div class="item"><img src="image/2.jpg" alt="" /></div>
            <div class="item"><img src="image/3.jpg" alt="" /></div>
            <div class="item"><img src="image/4.jpg" alt="" /></div>
            <div class="item"><img src="image/5.jpg" alt="" /></div>
            <div class="item"><img src="image/6.jpg" alt="" /></div>
            <div class="item"><img src="image/7.jpg" alt="" /></div>
            <div class="item"><img src="image/8.jpg" alt="" /></div>
            <div class="item"><img src="image/9.jpg" alt="" /></div>
        </div>
    </body>
</html>

js代码

script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function(){
//      浏览器窗口发生变换的时候 重新加载
        $(window).resize(function () {
            init();
        })
        init();
        function init(){
            //width()  不包括 margin/padding/border
            //outerWidth(true) 包括padding/border  加参数true 能获取到argin
            var itemWidth=$(".item").outerWidth(true);//每个图片的宽度
            //console.log(itemWidth)
            var cols=parseInt($(window).width()/itemWidth);//浏览器的宽度/图片的宽度=列数
            var heightArr=[];//创建一个存放每个图片的高度的数组
            for(var i =0;i<cols;i++){ //每个数组的长度就是 列数的长度  
                heightArr.push(0);//最开始的时候可以默认高度是0；【，0，0】
            }
            //循环每一条图片
            $('.item').each(function(index,item){
                var idex=0;//初始索引为0
                var minHeight=heightArr[0];//初始设置最小高度是数组的第一个
                for(var i=0;i<heightArr.length;i++){
                    if(heightArr[i]<minHeight){//判断数组中的每一个是否比默认设置的最小高度小，小于直接赋值给最小高度
                        minHeight=heightArr[i];//最小高度
                        idex=i;//当前索引 
                    }
                }
                //设置每个图片的样式
                $(item).css({
                    left:itemWidth*idex,//图片距离左边的位置 就是当前图片的宽度*他的索引
                    top:minHeight //图片距离顶部的位置就是最小高度
                })
                heightArr[idex]+=$(item).outerHeight(true); //高度对应的索引值就是当前图片高度的值
            })  
        }
        
    })
</script>