jQuery简单实现瀑布流布局

Posted 2020-09-06

实现原理很简单

一、算出每行最多存放多少张图片，赋值给最外层盒子的宽度

二、图片采用绝对定位，通过js来改变top值，当前页面的图片直接在html中设置完毕

三、创建一个数组存放当前所有图片top值，找到最小top值从而确定下一行第一章图片位置，以此类推...

四、触发scroll事件时重新渲染页面

 

这里图片事先准备好，也可以http跨域请求数据~

 

下面是代码部分

 

css样式：

            body,div,img{margin:0;padding:0;}
            #main{
                margin:0 auto;
                position:relative;
            }
            #main .wrap{
                padding:10px 0 0 10px;
                position:absolute;
            }
            #main .box{
                border:1px solid #666;
                border-radius:4px;
                width:250px;
                padding:5px;
            }
            #main .box img{
                width:250px;
            }

 

html结构：

<div id="main">
            <div class="wrap">
                <div class="box">
                    <img src="images/1.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/2.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/3.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/4.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/5.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/6.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/7.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/8.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/9.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/10.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/11.jpg">
                </div>
            </div>
            <div class="wrap">
                <div class="box">
                    <img src="images/12.jpg">
                </div>
            </div>
        </div>

 

js代码：

        //页面加载完毕渲染
        window.onload = function(){
            waterFall("#main",".wrap");
        };
　　　　　
        window.onscroll = function(){
　　　　　　//储存图片
            var arrImg = [
                "images/1.jpg",
                "images/2.jpg",
                "images/3.jpg",
                "images/4.jpg",
                "images/5.jpg",
                "images/6.jpg",
                "images/7.jpg",
                "images/8.jpg",
                "images/9.jpg",
                "images/10.jpg",
                "images/11.jpg",
                "images/12.jpg"
            ];
            for(var i=0;i<arrImg.length;i++){
                $("#main").append($("<div class=‘wrap‘><div class=‘box‘><img src="+arrImg[i]+"></div></div>"));
            }
            waterFall("#main",".wrap");
        }
        //适应不同尺寸窗口大小
        /*
            @param1 最外层父级元素id
            @param2 图片父级元素类名
        */
        function waterFall(Id,className){
            var    jqId = $(Id),
                jqClass = $(className),
                pageW = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth,  //当前窗口宽度
                colNum = Math.floor(pageW/jqClass.innerWidth()),  //每行列数
                mainW = colNum*(jqClass.innerWidth());  //每行总宽度
            jqId.css("width",mainW);
            //设置top值
            var arrT = [];
            jqClass.each(function(e){
                if(e<colNum){
                    jqClass.eq(e).css("left",jqClass.innerWidth()*e);
                    arrT.push(jqClass.eq(e).innerHeight());
                }else{
                    var minH = Math.min.apply(null,arrT),  //获取当前数组最小值及对应索引值
                        index = arrT.indexOf(minH),
                        minL = jqClass.eq(index).css("left");
                    jqClass.eq(e).css({
                        "top":minH,
                        "left":minL,
                    });
                    arrT[index] = minH + jqClass.eq(e).innerHeight();
                }
            })
        };